Js issue I can't get the codes for a sticky nav to work along with the code for a hamburger menu

1

I am creating a responsive navigation with a hamburger menu that also has a navigation that sticks to the top of the browser window once you’ve scrolled to a specific point. the issue is that if the code for the Sticky Nav is implemented first then my hamburger menu code will not run and vice versa. is there a way to fix this?

below is the Js code please let me know if anyone can help me figure this thing out thank you in advance:

$(document).ready(function(){
		//hamburger portion
$('.hamburger').on('click', function(){
	$('.mainNav').toggle();
});

//stickyNav Portion
var navOffset = $('nav').offset().top;	

$('nav').wrap('<div class="nav-placeholder"></div>);
$('.nav-placeholder').height($('nav').outerHeight());
$(window).scroll(function(){
	
	var scrollPos = $(window).scrollTop();
	
	if(scrollPos >= navOffset){
		$('nav').addClass('fixed');
	}else{
		$('nav').removeClass('fixed');
	}
	
	});
});

the code for the navigation is below:
  <nav id="navBar">
	<!---Hamberger Icon-------->
    	<div href="#" class="hamburger">
        	<div class="line"></div>
            <div class="line"></div>
			<div class="line"></div>
        </div>					 
  	<!----End Hamberger Icon ---->
  	<!----Start Main Navigation-->
 		<ul class="mainNav">
 			<li><a href="index.php"><i class="fa fa-home"></i> Home</a></li>
 			<li><a href="about.php"><i class="fa fa-user" aria-hidden="true"></i> About</a></li>
 			<li class="dropdown mega-dropdown">
            	<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"><i class="fa fa-briefcase">
            	</i> Products<span class="caret"></span></a>
            	
            	</li>
            <li><a href="blog.php"><i class="fa fa-bullhorn"></i> Blog</a></li>
            <li><a href="careers.php"><i class="fa fa-users"></i> Careers</a></li>
            <li><a href="contact.php"><i class="fa fa-envelope"></i> Contct Us</a></li> 
 		</ul>
	<!----End Main Navigation---->
   	</nav>
2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

3

Thanks for the tip. i’m new to all of this and not even sure how to use codepen yet. i tried to put a sample up for others to see as i try to figure this out and none of my styles would display even after creating the scss files. At any rate thank you for showing me how to post my code.

Any pointers on how to resolve my issue?