Creating a Sticky navbar

[artbaker82]

I just started a design for a friend’s business. I want there to be a landing page with a background image that fills the screen . I want a navigation bar to appear at the bottom of the page with links to the rest of the sections. When the user scrolls up, I want the navigation bar to remain fixed at the top of the screen.

As you can see, the navigation bar will stick to the top, but only until the second section reaches the top of the page, then it pushes the nav bar out of the viewport. What am I missing to fix the navbar to the top of the viewport permanently?

Here’s a link to the codepen project: https://codepen.io/artbaker82/pen/RworKJb?editors=1000

Thanks for your help!

[artbaker82]

Hello,

I am having some issues creating a sticky nav bar at the top of the page. The idea is to have a hero image with some bio text. The nav bar appears at the bottom of the page and is supposed to stick to the top while the use scrolls through the rest of the page.

For some reason, the nav bar will only stick until the next section appears, then it scrolls with the rest of the page. Why is it doing this? and What do I need to change so the navbar stays fixed the whole time?

Thanks!