[Resolved] Menu on mobile

Home Forums Support Menu on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #94227
    Kevinn02

    Hi there,

    I have a secondary navigation menu on a website. When I view the website on mobile the secondary menu appears (quite small) under the content.. What I want is that the secondary nav is right below the main navigation MENU or either IN the main navigation MENU.

    I hope you understand me?

    Thanks in advance!

    #94316
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Where do you have the Secondary Navigation position set to?

    Can you possibly link me to the site?

    Thanks!

    #94488
    Kevinn02

    Hi Tom,

    As left sidebar. Here is the URL:
    http://joostdonders.nl

    #94649
    Tom
    Lead Developer
    Lead Developer

    Nice catch! I’ll have to fix this in the next version.

    For now, you can add this code to your wp_footer hook:

    <script type="text/javascript">
    	jQuery(window).load(function($) {
    		var mobile, widthSecondaryTimer;
    		mobile = jQuery( '.menu-toggle' );
    			
    		function generateCheckSecondaryWidth() {
    			if ( mobile.is( ':visible' ) ) {
    				jQuery('.secondary-navigation').insertAfter('.main-navigation');
    			} else {
    				jQuery('.secondary-navigation').appendTo('.gen-sidebar-secondary-nav');
    			}
    		}
    			
    		if ( mobile.is( ':visible' ) ) {
    			generateCheckSecondaryWidth();
    		}
    			
    		jQuery(window).resize(function() {
    			clearTimeout(widthSecondaryTimer);
    			widthSecondaryTimer = setTimeout(generateCheckSecondaryWidth, 100);
    		});
    	});
    </script>
    #94826
    Kevinn02

    Thanks Tom! It is now below the main menu.

    And if I want to display the secondary menu in the main menu, but only on mobile?
    Is this possible?

    Thanks!

    #94954
    Tom
    Lead Developer
    Lead Developer

    Hmm, not super easily..

    You could add all of your secondary menu items to the primary menu, and each give them a class of “mobile-only”.

    Then add this CSS:

    .mobile-only {
          display: none;
    }
    
    @media (max-width:768px) {
          .secondary-navigation {
                display: none;
          }
          .mobile-only {
                display: block;
          }
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.