CODEWITHSUNDEEP
htmlcss
Robert Kolaric
Robert Kolaric

Reputation: 11

CSS fixed top menu navigation is under some items

I encountered a problem regarded my website: I tried to make the upper menu fixed and now when I'm scrolling through the website, all the headings and paragraphs are over the menu:

Here's a picture of the problem enter image description here

This is the HTML for the fixed top menu

<div class="topnav" id="myTopnav">
        <a href="#" class="active">Home</a>
        <a href="#">About</a>
        <a href="#">Menu1</a>
        <a href="#">Menu2</a>
    </div>

This is the CSS for the fixed top menu

.topnav {
background-color: #333;
overflow: hidden;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}

So the question would be: How can I make it to be on top of everything?

Upvotes: 0

Views: 145

Answers (2)

Xerjoff
Xerjoff

Reputation: 151

.topnav {
    background-color: #333;
    overflow: hidden;
    z-index: 100; /* or 999 */
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}

Upvotes: 1

Paul Pirie
Paul Pirie

Reputation: 62

Try Setting The 'z-index' to a higher value

Upvotes: 0

Related Questions