[Resolved] Mobile Navigation

[Andy]

Hi,

I’d like the Navigation bar to be full-width on mobile/tablet view as well as desktop and also remove the padding below it so it sits neatly on top of the slider.

I’ve tried changing the following CSS within my mobile/tablet navigation breakpoint:

.inside-header {
    padding: 30px 40px 30px 40px;
}

to

.inside-header {
    padding: 30px 0 0 0;
}

But this also removes the padding from the left and right sides of the logo and on narrow mobiles like an Iphone 5s there is no spacing either side of the logo.

Is there a better way to achieve this?

URL: http://tinyurl.com/jdwcmls

• This topic was modified 7 years, 9 months ago by Andy.
• This topic was modified 7 years, 9 months ago by Andy.

[Jamal]

Hi

Let’s try this please:

– Remove any custom css you might have added regarding the navigation bar.
– Go to “Appearance > Customize > Layout”
– Set heade width to “full”, header alignment “center”, navigation width to “full” and and navigation position to “below header”.

Then lets see the result and if we need to adjust more.

[Andy]

Hi,

I’ve commented out the custom CSS which makes the mobile nav kick in sooner (its the CSS Tom provided on github).
Regarding the customizer settings, those are the settings I’m already using, see screenshot:

http://prntscr.com/bpk5uu

[Tom]

This script is causing the issue:

<script type="text/javascript">
	jQuery(window).load(function($) {
		var mobile, widthTimer;
		mobile = jQuery( '.menu-toggle' );
			
		function generateCheckWidth() {
			if ( mobile.is( ':visible' ) ) {
				jQuery('.main-navigation').appendTo('.inside-header');
			} else {
				jQuery('.main-navigation').prependTo('.inside-header');
			}
		}
			
		if ( mobile.is( ':visible' ) ) {
			generateCheckWidth();
		}
			
		jQuery(window).resize(function() {
			clearTimeout(widthTimer);
			widthTimer = setTimeout(generateCheckWidth, 100);
		});
	});
</script>

If you remove that (from wp_head hook it looks like), then your mobile menu should stay full width.

[Andy]

Oh stupid me!
Originally I had the menu floated to the right of the logo and on mobile view it was putting the menu above the logo. I wanted it below the logo on mobile view too so I added that script from a forum thread.

However, because there was too many links to fit to the right of the logo I changed it to below the logo on desktop view too, but I had forgotten I had added that script earlier!.
Thank you and sorry for wasting your time on something I had caused myself.

Is there some CSS you could recommend to maybe reduce the spacing between menu items responsively and maybe text size so that I dont have to have the mobile navigation kick in so early?. So keep desktop spacing/font size as it is but reduce it for say @1151px and below (when it start wrapping onto 2 lines). The nav items currently use padding in pixels, maybe something that uses percentages instead would be better?.

• This reply was modified 7 years, 9 months ago by Andy.

[Tom]

No worries!

This might help: https://generatepress.com/forums/topic/nav-bar-wrapping-with-social-icons-pushed-right/#post-205107

[Author]

Posts