Can't seem to get sticky nav to work

I’m experimenting with Bootstrap, and it may be just that it’s been a long day :slight_smile: but I can’t figure out what to change to get the navbar to be sticky…

Page is here.

I’ve tried changing it, but it doesn’t do anything… probably just missing something obvious.

Any help appreciated!

You have the CSS class .position-sticky applied to your navigation (which I assume you added through the display panel dropdown), but there are no CSS rules defined for this class, nor can I find it in your CSS files.

To make the navigation sticky, you need to select the navigation, apply the class .sticky-top, and then your navigation will stick. Go to the properties panel and click the “+ Add class” button, then type in “sticky-top” in the search bar and click the “add class” button.

1 Like

Hey Andrew,
You may want to check your path first for your js files. Fix the errors first.
I got a status 404 on some js files.

1 Like

Perfect, thanks. I’ll have to look into the “sticky” property…

Hi housler -

It seems to be working now - how are you finding the errors?

cheers

Hey Andrew, I’m using the code inspector on chrome. F-12
You still have 1 error but it’s just the favicon.

Just curious… what’s the difference between using fixed-top vs. sticky-top?

1 Like

Fixed position forces an element to stay frozen to one spot relative to the viewport. Sticky allows an element to move within the viewport when you scroll until it reaches a certain point (usually the top) and then it “sticks” to that spot.

https://www.w3schools.com/css/css_positioning.asp

1 Like