Sticky header pops when bar container is above it

[jrhager84]

I have a header with a top bar and a header below it, and I’d like the bottom bar to be ‘sticky’ and it technically works, but it ‘pops.’ How do I get it to smoothly transition?

[ruenel]

Hello @jrhager84,

Thanks for writing in! Is both of your Bar elements set as sticky? To better assist you with the issue, please provide us the URL of your page where we can inspect your header.

It could also be a plugin issue. Have you done the following already?

• Testing For Theme Related Issue
• Testing For Plugin Conflict
• Child Theme
• Disabling Cache
• Disabling Cdn
• Version Compatibility

Best Regards.

[jrhager84]

No - the first bar is a ‘top bar’ that sits at the top, where I want the bottom bar to scroll up until it hits the top, and then it sticks to the top of the page. If that makes sense. I have provided the URL in a secure not.

[ruenel]

Hello @jrhager84,

I could not replicate the issue on my local testing server. This may be unique only to your site header or bar settings. We would love to check your bar settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[jrhager84]

I have added the credentials to a secure note.

[tristup]

Hi @jrhager84,

I went ahead and followed the below steps and now the transition of the Header is smooth.

Step 1: Create a copy of the sticky bar.
Step 2: disable Sticky of the first bar
Step 3: Make the second bar Hide initially and enable the Sticky

In that way the Sticky bar will only appear once it is scrolled and sticky, and when you scrolled up, it automatically disappear and the original Bar will be shown.

Thanks

[jrhager84]

Is there any way to avoid this behavior?

[tristup]

Hi @jrhager84,

I have adjusted the Trigger Offset to 100 and that fixes the problem you mentioned in your screenshot.

Thanks

[jrhager84]

Just out of curiosity - I remember there being a way to just have the one header. I definitely prefer the ‘look and feel’ of just having the one header stick when it hits the top. I can program it in JS, but it seems like the perfect (intended) use of having the sticky options. Is it just having the bar above it that makes it the issue? I know I’ve done it in the past (in prev versions of X theme). It’s just been so long I can’t remember how I did it.

[tristup]

Hi @jrhager84,

You can use the one header by setting the Trigger Offset to 100. But it may jump a little which you are trying to avoid. Here you are using the customize header where the options are different than the X theme where predefined code implied to the sticky headers with the predefined transition values.

Thanks

[jrhager84]

The solution seems to be working, but I encountered an issue with the off-content navigation when the sticky bar is viible. How do I set the off-content to dock relative to the window so it appears above the header? Thanks! Here is a picture to explain:

[tristup]

Hi @jrhager84,

I have checked your website again but didn’t find the issue you described here. I would suggest you check once by clearing all types of cache including the Style Cache from Cornerstone > Settings > System > Clear Style Cache and check in the incognito/private mode of the browser.

If that does not help, and you are still facing that issue, please explain the steps to replicate the issue. I would also suggest you make screen casting video, which help us to recognize the problem with the steps to replicate it.

Thanks