I have a sticky navbar (search bar) but it still overlaps with the contents of the page when you scroll down

I wonder how I can have the search bar (not the top navigation bar) not overlap with the page contents when you scroll down the page. Please note, I have a navigation bar and a search bar, what I am referring to in this issue is the search bar (the sticky bar) I.e. I don’t intend to have the top navigation bar sticky.

Desired Outcome: to have the search bar on top of contents when the page is scrolled down instead of it overlapping with the contents of the page

Things I tried: see in codeply, link below ⬇️.

See code in codeply: https://codeply.com/v/1vpjO4BD6h

Thanks

2 answers

  • answered 2020-06-27 04:24 Ajay Sivan

    Add a z-index value to your .sticky class

    .sticky {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 99; // z-index value should be heigher the content z-index if any.
    }
    

    Hope this is what you're trying to achieve.

  • answered 2020-06-27 04:26 sheriffderek

    xx101. Can you create a really simple example of this? Maybe in a js fiddle like this? ->

    <header>header</header>
    
    <main>
      <section>main content stuff?</section>
    
      <aside>
        sidebar
      
        <div class="field">
          <label for="x">Search</label>
          <input type="search">
        </div>
       
      </aside>
    </main>
    

    .

    * {
      border: 1px solid red;
      padding: 2px;
    }
    
    main {
      display: flex;
      min-height: 200vh; /* for example */
    }
    
    .field {
      position: sticky;
      top: 0;
    }
    

    https://jsfiddle.net/sheriffderek/sq97ygvo/

    Hopefully - this example can explain how to create the minimum example. : )