Sticky Pro Header - Bar 2 is floating under Bar 1 on scroll

Hi @justinmking,

Thanks for writing in.

To have a better understanding of the situation, I need to check your setup however upon checking your site, I could see that it is not working.

Please share us your admin credentials also if you have not make your header live yet.

Don’t forge to set it in a secure note.

Thanks.

Ah yes, enabling Cloudflare tonight is working splendidly as you can see. I’ll ping you when the site is back up.

The site is back up.

Edit: Can you delete your first post and my two follow-ups from the thread? Thanks.

Hi,

I have made this whole thread private. Only you and the staff will be able to see this.

To prevent your second bar from going under, try to set position to absolute and trigger offset to zero.

Hope that helps.

That’s not working. Here are my settings -

Bar 1:

Bar 2:

Hi Justin,

I checked your website and there is an error in the browser console:

The error shows that there is a wrong HTML code, a tag is not closed correctly or something like that.

That might cause the issue that you are experiencing. Please remove the Custom JS and CSS code that you added in the Pro > Theme Options > JS/CSS and also try to change from Child Theme to parent theme.

If the problem persists please follow the steps below:

  1. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  2. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

I set Shrink Amount to 1 for both Bar 1 and Bar 2 and this corrected the issue. However when the page scrolls the bars visibly shrink a small amount.

www.keyandpitch.com/store.

Any ideas? Tested in Chrome.

Hi There,

Setting the shrink to 0 or 1 does not really do anything. Use a decimal value instead (e.g. 0.75 or 0.5)

Thanks,

Ah sorry I wasn’t clear - I do not want it to shrink at all.

If you don’t want it to shrink, change it to 1.

Thanks.

*bump to keep open. I will post a video detailing the issue.

Lets us know so that we can help you on this!

Thanks

Okay! The goal is to have two sticky navs on the same page. While trying to get this set-up I’ve run into a few issues. The current settings are, for some reason, providing slight shrinkage on scroll, where nav bar size seems to decrease by 1 pixel per bar when scrolling occurs. This is despite the shrink setting for both bars being set to 1.

Tough to explain, so here’s a video with the error being shown between 0:07 - 0:15:

Current settings:

Bar 1

Bar 2

The error can be replicated at https://www.keyandpitch.com/store/

Thanks!

Hello There,

Could you show us the Self Flex and Flex Layout settings for each of your bars and containers?
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

Thank you.

It’ll be faster for you to take a look -

See “Store Nav” which lives on /store

Hello There,

I have logged in and checked your header. I could not find any reason why it there is 1 pixel difference in the header. I ended up turning off the bottom border of the bar and set it at 89 pixel only.

By the way, I have temporarily disabled WP Super Cache to see the changes immediately.

Please check your site now.

Well that seemed to do it. Thank you very much.

I will enable WP Super Cache.

You are most welcome!

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.