PLZZ HELP! ( Position:sticky)

(Position:sticky) is giving me serious pain.I am using sticky in the navigation bar in mysite, but it is not working. I have the search the internet and found that (overflow:visible) is in the ancestor(s) needed to work properly.But i’ve given overflow:visible to every encestor but it’s still not working. I’ll be great if you guys take a look at this snippets (Html,CSS)below:
HTML:

<header>
  <div id="logo">
    <a href="boipori.ga"><img id="logo-img" src="https://i.ibb.co/HqL76gL/boipori-ga.png" alt="boipori-ga" border="0"></a>
  </div>
  <title><img  id="logo-img"src="https://i.ibb.co/JqPqTvd/Logo-Makr-2-BWsh8.png" alt="Site logo" border="0"></a></title>
<h1 id="slogaan">Online Bookstore in Bangladesh</h1>
<nav id="nav-bar">
  <div class="nav-item">
    <a href="">Home</a>
  </div>
  <div class="nav-item">
  <a href=""> Best Seller</a>
  </div>
  <div class="nav-item">
    <a href=""> Catagories</a>
  </div>
  <div class="nav-item">
    <a href="">Authors</a>
  </div> 
  <div id="s" class="nav-item">
    <input type="search" class="input-search" placeholder="Search your Book here">
  </div>

  <div class="nav-item">
   <a href=""> Discount</a>
  </div>
</nav>
</header>

CSS:

*{
  box-sizing:border-box;
  font-family: 'Raleway', sans-serif;
  
}
a{
  text-decoration:none;
}
h3{
  text-align:center;
}
body{
  margin:0;
  background-color:#ffffff;
  overflow:visible;
}
header{
  overflow:visible;
}
.bangla{
  font-size:2.5em;}
#logo-img{
  display:block;
  margin:0 auto;
  width:250px;
  margin-top:10px;
}
#logo{
  margin:0;
}
#slogaan{
  display:block;
  text-align:center;
  margin-top:2px;
  color:#89968a;
  font-size:1.3em;
}
#nav-bar{
  display:flex;
  border-style:solid;
  border-color:#8fdd3c;
  justify-content:space-between;
  width:60vw;
  margin:0 auto;
  padding:0px;
  position:sticky;
  top:1px;
}

If you having trouble understanding the snippets avobe, then go HERE to see the full code.
Thanks :grinning:

Move your nav code block out of the header code tag block.
In the CSS give the nav-bar class a z-index of something high, like 1000. Maybe make the top: 0; so the page isn’t visible between the top of the page and the nav as it scrolls.

Thanks @leebut for your help! I am curious, why i need to move nav code block out of the header code tag block?

From what I understand, a ‘sticky’ element is only sticky until the opposite edge of the containing block reaches the ‘stuck’ element, at which point it becomes relative again and scrolls with it.

Taking the <nav> out of the header makes the <body> the container, so will not have an opposite edge to reach it.
I suppose you could have many sticky elements for different section headings that eventually scroll up when the bottom of the section reaches the top.

Oh yes, change ‘Catagories’ to ‘Categories’, and ‘Best Seller’ to ‘Best Sellers’, unless there is only one best seller. The Adventures of Tom Sawyer.
Is that random text in the ‘hero’ image below the navbar?

Anyway, it’s a good effort. Well done! :slight_smile: )

Thanks again mate @leebut !! I’ll change the things you’ve suggested !!