CODEWITHSUNDEEP
javascriptphphtmlcss
Wije_Roxx
Wije_Roxx

Reputation: 3

I've been trying to make my NAVBAR fixed to the top when scrolling. But it remains fixed in the middle

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.

Upvotes: 0

Views: 40

Answers (1)

rh16
rh16

Reputation: 1073

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.

Upvotes: 2

Related Questions