Header mobile breaking point

Din · June 2020

Hello,

I am working on a website that has quite a few menu items. They are overlapping and dropping to the second row. Even though i change the mobile breaking point to a lower number such as 1100px or even down to 950px, it's not activating the mobile menu. So if someone is using a laptop, the menu breaks into two rows.

How can i enforce the mobile header to initiate at a specific px width so that it switches to mobile menu and not drop the menu items to a second row.

Here is link to site i am building" http://deanm9.sg-host.com/

Maximum width before mobile menu is turned on is 1240px. Any way to increase that?

Din · June 2020

Or is there a way to reduce the padding between menu items?

I tried this code i found but it's not making any adjustments to padding between menu items

#Top_bar .menu > li > a span:not(.description) { padding: 0 3px !important; }

Bryan · June 2020

Hey,

try this css,

body #Top_bar .menu > li > a span:not(.description) {
	padding: 0 10px;
}

The css is the same as your to be honest, but it works fine. Maybe there is an error in your custom css before that CSS. Try adding this custom CSS to the top of the custom css page, not the bottom.

thanks

Din · June 2020

Is there a way to control where the break point to switch to mobile header at a specific px size?

Like if i want it to break at 1100px or 980px, how can i set that so that it switches to mobile header at a specific size?

Pablo · June 2020

Sadly, there is no way to change that.

You can only change the mobile breakpoint using basic headers, not the muffin header builder.

Thanks

Din · June 2020

What if i am not using the header builder add on. I am using the classic header.

Pablo · June 2020

You can change the mobile breakpoint in the Theme Options > Responsive > Header

https://prnt.sc/szwepm

Thanks

Header mobile breaking point

Comments