Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I don’t see the HTML for your responsive navigation menu. Is there separate HTML for it, or is the default navigation supposed to be responsive at smaller screens?
Have your tried the author yet?
Emil
In:
(max-width: 480px)
you have:
display: none;
that’s the reason why menu does not show, however there’s reason why not and that because standard menu will become toggled via JS and that does not show because of this JS error:
Uncaught ReferenceError: jQuery is not defined
Alright, so it should be toggled with jQuery.
Here’s the code in that jQuery file:
/////////////////////////////////////////////
// Toggle menu on mobile
/////////////////////////////////////////////
$('#main-nav-wrap').prepend('<div id="menu-icon" class="mobile-button"></div>');
$("#menu-icon").click(function(){
$("#header #main-nav").fadeToggle();
$("#header #searchform").hide();
$(this).toggleClass("active");
});
I’m really out of my element around jQuery. Anyone with jQuery knowledge see anything wrong that would be returning that error?
Could I just override the jQuery toggling by changing the “display: none;” to something else?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Try using this on your webpage;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
I can’t see jQuery, maybe that’s why
Ahh!! That did it Andrew.
Would you recommend pulling that .js file down and uploading it to my directory? Or will it load efficiently from googleapis?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
for what? I just noted few things you did the rest 😉
Emil
Thumbs up. Thanks a lot for all your help, guys.
