Weird issue with multiple sticky bars Pro header

Support
#1

I get a weird issue where the 2nd, lower bar initially scrolls then reappears under the main bar. Kinda annoying. Happens in the latest Chrome, Firefox, Firefox Developer Edition, Safari 10.x. Edge, but not in IE 11.

After realizing I was running Pro 1.2.0, I updated to 1.2.3 and cleared the browser cache, it still has a weird issue where the second bar starts to scroll but then moves tot he bottom of the top bar and then is sticky. Kinda makes a flash as this happens. Maybe this is an issue the trigger setting in the sticky settings would help?

Url/login will be added in a note.

#2

Hello There,

Thanks for writing in! This is normal because the bar needs to reach to the top of the page before it will become fixed-top. To avoid having this movement, please set all your bars as sticky. You just make sure that you add a top margin for the second bar so that it will not sit on top of the first bar.

Hope this helps.

#3

They’re both set to sticky. I don’t see a margin setting for the bars. Is it necessary to set this as a custom css rule?

#4

Hello There,

Please edit your header and set each of the bars positioned as Absolute and enable the Sticky bar option. For the second menu, find the top margin and insert the top margin with the same height as the first bar.

Hope this helps.

#5

That seems to not help at all and actually makes things worse. When both bars are set to absolute and sticky, they no longer have a bottom margin and now cut off the top of the page content. The 2nd bar still scrolls up a bit before it snaps to the bottom of bar 1 and the icons and text content in bar1 shift after scrolling and are slightly misaligned.

#6

Hello There,

Thanks for updating in! After so many tries with different settings, I can confirm that this is a limitation of the custom header. You cannot have two sticky bar at the same time without a slight movement of the second sticky bar. I would highly recommend that if it is viable, use only one sticky bar at the moment.

I’ve submitted this to our issue tracker so the developers will be made aware of it and take further investigation of what can be done to achieve unlimited sticky bars in the header.

Thank you for your understanding.

#7

I’ve reverted the bars to be static. Is there a way to add a margin to the bottom of the last bar when set to sticky? I could live with the slight movement, but the big issue was them sitting on top of and obscuring the top of every page. Would I need to also adjust the z-index to the same level as the page in order to achieve this?

#8

Hello There,

Thanks for updating in! Adding a bottom margin of the bar will not work because it is already position as fixed. To resolve the overlapping issue, you will just have to add a top margin to the content area:

.x-main {
  margin-top: 40px;
}

And please do not forget to change the z-index. Instead of 9999, please reduce it to just 99.

#9

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