Streaming live at 10am (PST)

Sticky navbar on mobile view isn't in sync with the scrolling nav bar


#1

Hi,

I've followed the instructions on making a sticky navbar where on scrolling the navbar will stick to the top once it hits the top of the screen. I got the instructions from here: http://webflowcodestutorials.webflow.io/navigation (search for "nav sticks").

Essentially I have two identical navbars where one is hidden but then appears when you scroll past the other one. However my problem is that in the mobile view, if you expand the navbar and then scroll down, the "fixed hidden" navbar appears but the menu is collapsed. If I then expand that one and then scroll back up that expanded navbar disappears and I am left with the unfixed navbar.

They are both out of sync - is there a way I can keep them synced (e.g. add the "Open" class on one when the other has the "Open" class?)

Please test it on my website below!

Many thanks,
Andrew


Here is my public share link: LINK
(how to access public share link)


#2

I can't take a look since you didn't post your public link but there is no way to sync 2 separate menus that I know of. What I would do is simply hide the top nav on mobile and only use the sticky nav. There really isn't a point to having that functionality on a small screen. I'd just change whichever nav is not affected by the code to fixed and hide the other on mobile devices.


#3

Yeah that's a good point about it not being useful on a smaller screen, so I've just made one of the navbars stick to the top on the mobile view.

Thanks.


#4

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