I've been researching how to create a sticky menu and have gone through numerous tutorials. I've also looked at related questions here but haven't found a solution that works for me without using a plugin. Is it possible to achieve this without a plugin?
I tried implementing the code from one of the tutorials, but the menu still doesn't stick.
Here are the code snippets I added to my original files:
HTML file:
<!--sticky menu-->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--ends here-->
CSS:
.fixed{
position:fixed;
top:0;
left: 0;
width: 100%;
background-color: transparent;
}
nav{
z-index: 500;
background-color: #ffffff;
}
.nav-placeholder{
margin: 0 0 40px 0;
}
.fixed .nav-inner{
padding: 0 20px;
}
.fixed .nav-inner-most{
max-width:700px;
margin: 0 auto;
background-color: #ffffff;
}
The JS script:
jQuery(document).ready(function() {
// function to run on page load and window resize
function stickyUtility() {
// only update navOffset if it is not currently using fixed position
} // end stickyUtility function
});
Summary: http://jsfiddle.net/misaki03/9gtk9x7r/1/
If anyone can provide guidance, it would be greatly appreciated.
I made some edits because I came across this code:
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>In the tutorial I was following, I noticed this line of code that seemed confusing. (Link provided due to length)
Although I'm not sure what it does, it did make the menu sticky. However, the sub-menu appears as I scroll down. Is there a way to fix this?