Ho do I make a "Sticky Top Navbar" stick to the top for the whole page of scrolling?
I'm using the "Clean Sky" template specifically and after making the position "Sticky Top" in Options it starts off sticky but then disappears(scrolls up and away) as it gets a little into the 2nd section.
"Clean Blog Template" doesn't either in fact it scrolls up and disappears instantly & "Creative Template" is like "Clean Sky".
Not sure what is causing your issue. I am on Mac version and just loaded up a site with that template and it defaults to Fixed to Top position (which you will find in the Options pane in top right). Works fine for me right out of the box. Could be you changed something that you aren't aware of? Try starting a new project with that template and see if the new one works or not.
Hi Jo,
it's not the fixed top it's when I change that default to sticky top.
So what I want to achieve is put a small 100px div above the menu then when I scroll the div and menu(navbar) scroll up but the menu stays at the top and the div disappears.
Similar to here
If you view their page source, they have a bit of javascript in the 'head' section that adds a class 'shrink' to the 'main-header' section when the user scrolls down 154 pixels
Hi Windy,
yes I see that.
I would like the sticky top in BSS to work all the way through the page scroll in the "Clean Sky" site not just for a little bit at the top.
I can't see any JS code in the "Clean Sky" template that changes anything.
I can make it work in "Business Casual" just by changing fixed top to sticky top. I can't see why I can't in "Clean Sky"
Thanks for the replies, I hope I can fix this
Once you've changed the navbar to sticky-top, drag it inside the 'main' section and put it above all the 'sections' inside 'main'
Holy heck, my very own video!
That's exactly what I was after.
Thanks so much, I appreciate it.
You're welcome :-)
One thing that BSS is not very clear about is that in order for Sticky top to work on a Navbar component, it has to be in the <body> it can't be nested inside another component like a container.
Thanks Printninja that's another great tip to know.
I didn't and wouldn't have known. :)