How can I display my navigation bar as sticky?-CodePudding

<body>
<div class="topnav">
  <!-- Centered link -->
  <div class="topnav-centered">
    <a href="#" class="logo">
      <img src="growmade2.png" style="height: 25px; width: 250px" alt="" />
    </a>
  </div>

  <!-- Left-aligned links (default) -->
  <a href="#news">SHOP</a>
  <a href="#contact">EXPLORE</a>

  <!-- Right-aligned links -->
  <div class="topnav-right">
    <a href="#search">MY CART</a>
  </div>
</div>

** CSS**

   .topnav {
    position: sticky;
    display: block;
    background-color: rgb(255, 255, 255);
    padding: 30px 80px 30px 50px;
  }

  .topnav a {
    font-family: "Roboto", sans-serif;
    font-family: "Roboto Condensed", sans-serif;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 900;
    display: inline-block;
    position: relative;
    color: #000;
    text-align: left;
    margin: 0 10px;
    padding-bottom: 2px;
    text-decoration: none;
  }

Hello I'm new in css. I want to create a website with static navigation bar but a can't display it static? Can anybody solve this problem? Thanks in advance!!!

CodePudding user response：

Well, you could use fixed position to make a navbar sticky. eg:

    .topnav {
    position: fixed;
    top: 0;
    z-index: 99;
  }

CodePudding user response：

You need to add top: 0:

body {
    margin: 0;
    padding:0;  
}
.topnav {
    position: sticky;
    top: 0;
    display: block;
    background-color: rgb(255, 255, 255);
    padding: 30px 80px 30px 50px;
  }

  .topnav a {
    font-family: "Roboto", sans-serif;
    font-family: "Roboto Condensed", sans-serif;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 900;
    display: inline-block;
    position: relative;
    color: #000;
    text-align: left;
    margin: 0 10px;
    padding-bottom: 2px;
    text-decoration: none;
  }

<div class="topnav">
  <!-- Centered link -->
  <div class="topnav-centered">
    <a href="#" class="logo">
      <img src="growmade2.png" style="height: 25px; width: 250px" alt="" />
    </a>
  </div>

  <!-- Left-aligned links (default) -->
  <a href="#news">SHOP</a>
  <a href="#contact">EXPLORE</a>

  <!-- Right-aligned links -->
  <div class="topnav-right">
    <a href="#search">MY CART</a>
  </div>
</div>

<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>

CodePudding user response：

try this :

for sticky navbar on top position

.topnav 
{
    position: sticky;
    top:0;
}