I am having trouble getting the menu bar and logo to stick at the top of my header section in the template. I have been trying different solutions, including using the sticky.js plugin for almost 4 days now but it's not working. I also have parallax effect in the header section, could that be causing the issue?
.parallax-window {
background: transparent;
}
.parallax_bg {
z-index: 2;
position: relative;
color: #FFFFFF;
}<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
<div class="parallax_bg">
<div class="top_area">
<div class="header_area">
<div class="container">
<div class="row" id="navbar-example">
<div class="col-md-2">
<div class="logo">
<a href="#"><img src="img/header_img/logo.png" alt=""></a>
</div>
</div>
<div class="col-md-10">
<div class="main_menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#slider">Home</a></li>
<li><a href="#food_about">About</a></li>
<li><a href="#igredients">Ingredients</a></li>
<li><a href="#food_menu">Menu</a></li>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#reservations">Reservations</a></li>
</ul>
</div>
<div class="social_links">
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_text_area">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header_text">
<h2>the right ingredients <br /> for the right food</h2>
<a href="#" class="btn-filled">BOOK A TABLE</a>
<a href="#" class="btn-filled yellow-color-btn">SEE THE MENU</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>