我一直在尝试使我的NAVBAR在滚动时固定在顶部。 但它仍然固定在中间

Question

I've been trying to make my NAVBAR fixed to the top when scrolling. But it remains fixed in the initial position without moving to the stop and being fixed as I want. Code below,

I've tried W3 School tutorials, bootstrap and materialize. But nothing seemed to help. This is my last resort.

 div.wrapper { font-family: Comic Sans MS; width: 50%; padding-right: 25%; padding-left: 25%; text-align: justify; } .topnav { overflow: hidden; background-color: #80F; border-radius: 0%; position: fixed; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #6900c4; color: white; } .active { background-color: #490089; color: white; } .topnav .icon { display: none; } 

 <!-- The NAV BAR IS BELOW THE LOGO --> <!--LOGO--> <center> <a target="_blank" href="https://www.englishessays.online"><img src="img/logoheader.png" alt="Logo" width="65%"></a> </center> <br> <hr class="line" color="black"> <br> <!--NAV--> <div class="topnav" id="myTopnav"> <a href="https://www.englishessays.online">Home</a> <a target="_blank" href="https://www.englishessays.online/essays.php" class="active">Essays</a> <a target="_blank" href="www.englishessays.online/dialogues.php">Dialogues</a> <a target="_blank" href="www.englishessays.online/speeches.php">Speeches</a> <a target="_blank" href="www.englishessays.online/stories.php">Stories</a> <a target="_blank" href="www.englishessays.online/poems.php">Poems</a> <a target="_blank" href="www.englishessays.online/about.php">About</a> <a target="_blank" href="www.englishessays.online/contact.php">Contact</a> </div> 

The output should be: NAVBAR fixed to the top when scrolling. Error is: NAVBAR is fixed in the initial position without moving to the top.

Answer 1

You may need:

.topnav 
{
    overflow: hidden;
    background-color: #80F;
    border-radius:0%;
    position:fixed;
    top: 0;
    left: 0;
}

Its always a good idea to specify anchor points ( top , bottom , left , right ) when using fixed or absolute positioning.