My menu on the mobile version of my website is supposed to be hidden unless clicked, but it is always showing and in front of the content below. I have to assume there's something wrong in my css, but I cannot figure it out. How could I fix this? The website it heartlandcpr.com if you want to see the code.
Thanks for anything you can do!
ddheartland wrote
I'm sorry, I don't know if I understand. Do you know where the issue lies or what could be added to make that hidden when the screen is smaller?
It does not appear that you have any coding that will 'hide' the links at mobile size.
Add the below to your css styles:
@media screen and (max-width: 768px) {
#navlinks {
display: none;
}
}
Then add the below code to all of your pages. Include it directly before the closing </head> tag of the pages.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#menulink').click(function(){
$('#navlinks').slideToggle();
});
});
</script>
Then remove 'navlinks' from the anchor tag but leave the #
<h2 id="menulink"><a href="#navlinks">Menu</a></h2>
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices