Looking for a solution to stick the navigation menu to the top of the screen only when the screen is wider than 782px.
Progress so far: https://jsfiddle.net/ah4ta7xc/1/
Encountering an issue where there is an unintended gap at the top when applying the sticky-menu class.
HTML:
<div id="foo">Logo and other content</div>
<div id="main-menu">Main Site Menu</div>
CSS:
body {
height: 3000px;
}
#foo {
height: 50px;
background-color: #ccc;
}
#main-menu {
width: 100%;
height: 30px;
background-color: black;
color: white;
text-align: center;
padding: 10px;
}
.sticky-menu {
z-index: 10;
width: 100%;
position: fixed;
}
jQuery:
$(function(){
if ($(window).width() > 782) {
$('#main-menu').addClass('sticky-menu');
}
$(window).resize(function () {
if ($(window).width() > 782) {
$('#main-menu').addClass('sticky-menu');
}
else {
$('#main-menu').removeClass('sticky-menu');
}
});
});