Streaming live at 10am (PST)

How to get menu bar to stick at the top of the screen when scrolling


#1

This seems to have been addressed in the now locked topic of 'Menu at bottom then fixed to top' but the explanation video of how to do it now does not work (video does not exist). Can that video be reposted or does anyone else know how to keep a navbar fixed in place as the user scrolls down the screen?

I tried Fixed and Absolute position but this just scrunches it to the left and it still scrolls off the top of the screen.

Many thanks
Peter


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


#2

Basically you make 2 versions of your navbar. One stuck to the top (fixed) and one normal. You hide the former and once the latter reaches the top fo the screen, you hide it and show the former one with interaction. If well done it's unnoticeable.


#3

Thanks Vincent - but it's the fixing it bit I am stuck with, when I set it to fixed it scrunches to the left of the section, I have tried setting fixed on every item but it always pushes everything over to the left removing all space and ignoring the container:
Before:

and if I fix the Logo and Navbar:

UPDATE: Ok - I see that after I have fixed it a box opens below to position it, all good (scrabbling up that learning curve), but as you can see from above when I scroll some things pass in front of the frozen sections and other things pass behind....how do i make them all pass behind?

UPDATE 2: ...and that is what the z is for, set it to 1 and it stays on top :slight_smile:

I am using an empty container to push the content back down to its correct position underneath the fixed sections - is that the best way?

I also note that the smaller devices get screwed up, so each one needs adjusting.

Hope this is of some help to someone in the future.

I appreciate any help and your patience - I watched all the videos and searched help but was unable to find this documented.

Thanks,
Peter


#4

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