Sticky-top not so sticky

Hello everyone,

I am having trouble getting my navbar to actually stick to the top of my portfolio page as I scroll down. Any help you can offer is greatly appreciated.

Here is what I have right now…

Here’s a link to my portfolio page so you can see the rest of the code.

2 Likes

Hello!

Perhaps adding:

position: fixed;
top: 0;

could resolve the issue?

2 Likes

Do I add this in HTML or CSS?

in your css add this:

position: fixed;
    width: 100%;
    top: 0;

target this classes: class=“navbar navbar-inverse navbar sticky-top”

3 Likes

Woohoo! Thank you. It worked. :slight_smile:

using codepen, you shouldn’t include <head> in the html section. include the meta tags, external stylesheets and javascript via settings just like how you included jquery.min.js. currently you’re including bootstrap.js v3.3 in the html section and v4 under settings. tis best to include just 1 version (bootstrap css and js should have same ver)

Sticky-top not so sticky

the sticky-top class is defined by bootstrap and should be working without the need of adding new css rules. tis not working because tis a bootstrap 4 feat, you included bootstrap v3.3 css. also, navbar fixed-top is different from sticky-top.

ref:
bootstrap v4 navbar placement
fixed x sticky demo

Thank you for letting me know. I’m starting FCC again and saw your response so I’ve gone in and fixed. Much appreciated!

Use fixed-top class instead of sticky-top

How does this make navigation sticky, as she was asking, and not fixed, as you have suggested? :smiley: