WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Responsive nav menu isn't showing up (12 posts)

  1. johnnygjr
    Member
    Posted 1 year ago #

    So here's my under construction blog:

    http://www.ourfreakingbudget.com

    For the most part, the entire site's responsiveness is working really good, but for whatever reason, the main nav menu has disappeared. Before I made any changes/tweaks to the theme, it would show up as a small icon in the upper right corner. And now for the life of me, I can't figure out how to bring it back. I thought it might be a z-index thing or something, but that hasn't done the trick.

    Any geniuses out there that can help a brother out?

    Thanks!

  2. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    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?

  3. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Have your tried the author yet?

    Emil

  4. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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

  5. johnnygjr
    Member
    Posted 1 year ago #

    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?

  6. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Try using this on your webpage;

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  7. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    I can't see jQuery, maybe that's why

  8. johnnygjr
    Member
    Posted 1 year ago #

    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?

  9. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    that should be good

  10. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Thanks Emil.

  11. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    for what? I just noted few things you did the rest ;)

    Emil

  12. johnnygjr
    Member
    Posted 1 year ago #

    Thumbs up. Thanks a lot for all your help, guys.

Topic Closed

This topic has been closed to new replies.

About this Topic