Mobile menu weird width help

[Racimo]

Hi my mobile menu is doing something strange in certain width.
It happens from 980px to 1225px.
Here’s a screen shot:

I can’t figure out how I made this happen.

Thank you as always for all your help.

Dan

[christopher]

Hi Dan,

The problem that you are experiencing is because of the customization that you added. Please check the section that you added the media queries for 1225 pixels, such as:

@media (max-width: 1225px)
.masthead-inline .x-btn-navbar {
    display: block;
}

As a matter of fact it is not possible to change the mobile menu trigger point by CSS only, there are many other factors involved including Javascript code. If your intension is to avoid the desktop menu to go below the logo on tablet screens I suggest that you center the logo and make it correct with the code like this:

@media (min-width: 980px) and (max-width: 1205px) {
	.x-brand {
		width: 100%;
		float: none;
		text-align: center;
		margin-bottom: 10px;
	}
}

Alternatively you can make the font size and padding of the menu items smaller on the range above to force the menu to be inline with the logo.

Thank you.