Menu on mobile

[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!

[Tom]

Hi there,

Where do you have the Secondary Navigation position set to?

Can you possibly link me to the site?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kevinn02]

Hi Tom,

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

[Tom]

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>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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!

[Tom]

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;
      }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts