need nav bar to stick under the main nav bar when the user scrolls up

Question

I this nav bar to stick under the main nav bar when the user scrolls up, right now it sticks behind the main nav bar, how can I make it stay under the main header? I have tried a few things but I'm not good at javascript. Here are the main nav bar and the second one

HTML Main nav bar

   <nav id="navigation_elements">
        <div class="row">
            <!--Start of Main Navigation-->
            <div id="main_nav">
                <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-529" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-63 current_page_item menu-item-529"><a href="./" aria-current="page">Home</a></li>
    <li id="menu-item-721" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-721"><a href="./how-does-pawn-work/">How Does a Pawn Loan Work?</a></li>
    <li id="menu-item-728" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-728"><a href="./contact-us/">Contact Us</a></li>
    <li id="menu-item-720" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-720"><a href="./jewelry/">Jewelry</a></li>
    <li id="menu-item-727" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-727"><a href="./car-audio-and-accessories/">Car Audio and Accessories</a></li>
    <li id="menu-item-724" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-724"><a href="./consumer-electronics/">Consumer Electronics</a></li>
    <li id="menu-item-726" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-726"><a href="./tools/">Tools</a></li>
    </ul></div>     </div><!--End of Main Navigation-->
                </div>
    </nav>

HTML second nav bar

<div id="navbar1">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>

CSS

<style>
/* Style the navbar */
#navbar1 {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
#navbar1 a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

</style>

Javascript

<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementById("navbar1");

// Get the offset position of the navbar
var sticky = navbar1.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar1.classList.add("sticky")
  } else {
    navbar1.classList.remove("sticky");
  }
}
</script>

Answer 1

So now that I understand what you need, here is a modified example from W3School. We want to give the main navigation position: fixed;, top: 0; and height: 45px;. This makes it stick always to the top of the screen.

The container is here just to help with the margins. We want to give it margin-top: 45px;.

Next comes your banner with your banner content and styling. Here I have copied the same content from W3School so you can see the effect.

After your banner, we want to add your sticky navigation. You need to also add to the .sticky class top: 45px;.

I also edited the javascript a bit, so that it doesn't go behind the main nav shortly when scrolling. window.pageYOffset >= sticky - height Also your original javascript code had a typo in it var sticky = navbar1.offsetTop;, navbar1 should be navbar.

If you need further assistance applying this to your code, I will gladly help you with that.

Here is an example how it all works when put together:

    window.onscroll = function() {myFunction()};

    var height = document.getElementById('nav').clientHeight
    var navbar = document.getElementById("sticky-nav");
    var sticky = navbar.offsetTop;

    function myFunction() {
        if (window.pageYOffset >= sticky - height) {
            navbar.classList.add("sticky")
        } else {
            navbar.classList.remove("sticky");
        }
    }

body {
    margin: 0;
    font-size: 28px;
    font-family: Arial, Helvetica, sans-serif;
}

.container{
    margin-top: 45px;
}

#nav{
    position: fixed;
    width: 100%;
    top: 0;
    height: 45px;
    background: red;
}

#sticky-nav{
    overflow: hidden;
    background: green;
    height: 45px;
}

.sticky {
    position: fixed;
    top: 45px;
    width: 100%;
}

.sticky + .content {
    padding-top: 60px;
}

.header {
    background-color: #f1f1f1;
    padding: 30px;
    text-align: center;
}

.content {
    padding: 16px;
}

<!-- This is your main navigation: -->
<div id="nav">
    <!-- Your main navigation content goes here:  -->
</div>

<!-- Page content: -->
<div class="container">

    <!-- This would be your header/banner -->
    <div class="header">
          <h2>Scroll Down</h2>
          <p>Scroll down to see the sticky effect.</p>
    </div>

    <!-- This is your second navigation -->
    <div id="sticky-nav">
        <!-- Sticky navbar content goes here: -->
    </div>

  <!-- Random content, just to see the effect: -->
  <div class="content">
      <h3>Sticky Navigation Example</h3>
      <p>The navbar will stick to the top when you reach its scroll position.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

  </div>

</div>