Break point for mobile hamburger nav

Support
#1

Hi,
I need the hamburger menu to kick in when the screen is less than 1200px. Currently it only displays the hamburger menu if the screen size is 980px.

This is the site > https://got2jot.co.uk

Thanks.

#2

Hello @Lorenmn,

Thanks for asking. :slight_smile:

Please add following CSS to change mobile menu breakpoint:

@media (max-width: 1200px) {
    body .x-navbar .x-btn-navbar {
         display: table;
         margin: 0 auto;
    }

    body .x-navbar .x-nav-wrap.desktop {
         display: none !important;
    }

    body .x-navbar .x-nav-wrap.mobile {
         display: block !important;
    }
}

Thanks.

#3

It does force the mobile nav to display but the menu is open now by default on all small device views. I need it closed.

#4

Hi There.

Please try this code instead

@media (max-width: 1200px) {
    a.x-btn-navbar {
        display: inline-block;
        float: right;
    }
   .x-nav-wrap.mobile.collapse.in {
      display: block;
    }
   .x-nav-wrap.desktop {
    display: none;
   }
}

Hope it helps

#5

That’s better but now the ‘hamburger’ icon isn’t centered.

#6

Hi There,

Have you managed to fix it? It looks centered on my end. If you are seeing different please clean your browser cache and test it again,

Thanks!

#7

No. It’s really strange. As I resize my browser window, I see the hamburger icon on the left, then it adjusts to the center. I want it to be centred whenever it shows.

#8

Hi there,

Please try this code:

.x-navbar {
    text-align: center;
}

Hope this helps.

#9

Yep! That did it. Such a simple fix. Sorry I missed it! Thanks.

#10

Glad we could help.

Cheers!

#11

I needed to change the breakpoint on the mobile menu to further out due to the menu length. however I can’t get the mobile menu to expand on “ipad” size or anything larger than the phone screen size out to the new breakpoint of 1300. https://stairsolution.com/

#12

Hi there,

You should change this entire CSS,

@media ( max-width: 1300px ) {

/*
body .x-nav-wrap.desktop {display: none;}
body .x-nav-wrap.mobile.collapse {display: none;}
body .x-nav-wrap.mobile.collapse.in {display: block;}
body .x-btn-navbar {display: block; float: right;}
*/

 a.x-btn-navbar {
        display: inline-block !important;
        float: right !important;
    }
   .x-nav-wrap.mobile.collapse.in {
      display: block !important;
    }
   .x-nav-wrap.desktop {
    display: none !important;
   }

/*
	.masthead-inline .x-btn-navbar {
		display: block;
		float: right;
	}
	
	.x-nav-wrap.desktop {
		display: none;
	}
	
	.x-nav-wrap.mobile.collapse.in {
    	display: block !important;
    }
    
    .masthead-inline .x-btn-navbar {
		display: none !important;
	}
*/	
/*
	.x-nav-wrap.mobile {
	    
	    clear: both;
	    overflow: hidden;
	}
*/



}

@media (min-width: 1301px) {

	.x-nav-wrap.desktop {
		display: block;
	}

	.masthead-inline .x-btn-navbar {
		display: none;
	}
}

to this simple one,

@media ( max-width: 1300px ) {
.x-nav-wrap.desktop {
display: none;
}
.x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.mobile.in, .x-nav-wrap.mobile.collapsing {
display: block;
}
}

Then simply change the 1300px value according to your target size.

Thanks!

#13

Thank you! That worked perfectly.

Main menu - huge line height
#14

You’re most welcome.