Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Mobile Navigation

Home Forums Support [Resolved] Mobile Navigation

Home Forums Support Mobile Navigation

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #206969
    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 5 years, 4 months ago by Andy.
    • This topic was modified 5 years, 4 months ago by Andy.
    #206978
    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.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #206980
    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

    #206998
    Tom
    Lead Developer
    Lead Developer

    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.

    #207011
    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 5 years, 4 months ago by Andy.
    #207145
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.