Archived topic

Menu on mobile

5 replies · Started by Anonymous on April 1, 2015

Viewing posts 1–6 of 6

April 1, 2015 at 5:11 am #94227

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!

April 1, 2015 at 10:25 am #94316

Hi there,

Where do you have the Secondary Navigation position set to?

Can you possibly link me to the site?

Thanks!

April 1, 2015 at 11:50 pm #94488

Hi Tom,

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

April 2, 2015 at 9:21 am #94649

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>

April 3, 2015 at 12:38 am #94826

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!

April 3, 2015 at 9:38 am #94954

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

This archived topic is closed to new replies.

Start building better websites today.