https://i.sstatic.net/esS0T.png
Is there a way to make this second nav bar stick under the main nav bar when the user scrolls up? Currently, it sticks behind the main nav bar. I have attempted a few solutions, but I struggle with JavaScript. Here is the code for the main nav bar and the second one:
Main nav bar HTML
<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 for the 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>