Sticky menu bar problems

Support
#1

Hi there

I have 3 problems with my sticky menu bar setup. I made 2 bars for the menu. One bar shows the complete menu on big screens. The other bar shows a mobile burger menu and a cart off canvas on mobile screens.

Problem 1:

For the main menu on big screens, I set the bar to width auto but it does not resize to fit the menu items when it is sticky.

Problem 2:

The other bar (for smaller screens) is not sticky to the top of the screen. There is a gap between the top of the screen and the bar/menu:

Problem 3:

When smoothly scrolling down on my page, the moment the bar becomes sticky this scrolling is not smooth and slow anymore, but there is a bigger leap. It “jumps” faster to the top of the screen. Therefore the content below the sticky bar is not easily readable anymore. It disappears quicker to the top of the screen behind the menu.

See movie:

Thanks in advance for your help!

Greetings

Dries

#2

And problem number 4:

Suddenly my main menu bar is not showing under the header anymore but on the top of the screen:

It should remain below the header when not sticky…

#3

Hey @Woordenaar,

Problem 1:

Maybe you mean height auto? Setting the height to auto will dynamically set the bar’s height according to your content’s height on page load. With that said, if you first loaded the page on a maximized window, you’ll see that the menu is in a single line so it’s height is short. When you resized the window, your menu’s height became longer or it stacked to 2 lines and your bar’s height remained the same because it already have set the height for the bar.

With that in mind, and what I would recommend is that you hide your Navigation Inline and show a Navigation Collapsed at this point like this https://youtu.be/Hu3iozUm90E

Problem 2:

This is a known issue when you use multiple bars and you have a sticky bar at the bottom and the top bars are hidden. For now, you will need to use only 1 bar as sticky. You need to design your menu in such a way that they will fit in 1 sticky bar. The screencast above is also an example of this application where you hide an element then show another one in the same container.

Problem 3:

This one is related to height auto. I’ve tested setting your bar to 6 em and it doesn’t jump. I could not replicate this in my test site though. Maybe because I’m using Pro 2.

Problem 4:

I see this issue in your site only when you resize the window. I’m not able to replicate this on my test site also.

Please copy your site to staging and then try upgrading to the latest version of Pro. Please see our Changelog, Release Notes and follow our Update Guide

Thanks.

#4

Thanks for the info ! :slight_smile:

#5

You are welcome!

#6

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