https://codepen.io/larrybird/pen/PoZpqje Landing Page Navigation Bar Issue

https://codepen.io/larrybird/pen/PoZpqje

Hi, I am wondering if anyone knows how to make the navigation bar, which has the position:‘fixed’, to not display the content of the body when the user scrolls down on the page. At the moment, the body content is visible in the navigation bar.

Thank You

It would be nice if you could explain a bit better.
The above is a bit confusing – it might be my understanding of English, though.

1 Like

Thank you for replying, I appreciate it. I’m sorry that I did not make it clear. What I am trying to do is give the “nav-bar” id a higher level so that it is above the the main page, and hides the main page when it is being scrolled down.

Best

Did you mean the nav- bar hides when main is scrolled? I still seem not to get it.

1 Like

Hello, the nav-bar is set to “fixed” using the css. However, the text from the rest of the page scrolls below it at the same time, so that text from the nav-bar and the rest of the page are on top of each other. I am trying to have the nav-bar visible on “top” of the ‘body’ of the html document, so that there is only one set of text viewable while scrolling.

Best

what i observed in your code:

  1. You have an h1 in the nav(it’s not right).
1 Like

Thank You, I have tried to fix it, I appreciate your feedback!

Best

There are many things wrong with the code.

Codepen provides you a boiler plate already. You don’t need to declare a DOCTYPE and all those stuffs. If you need to add anything in the head tag, click on the settings button > HTML and add it there.

1 Like

Hi, thank you for the tip. I have been thinking about this for quite some time. I love codepen.io, it is a great tool!

Best

1 Like

I have figured it out. It is called the “z-index”. If I wanted to make the “nav-bar” shown first, it would be given a value like so:

nav-bar {
z-index: 1;
}

Hopefully this is helpful to someone else as well.

Best