Mobile Header appearance – how to set different break points.

[Sotiris]

I was playing around with the mobile header options and specifically the visibility options and I was wondering where should I look into in order to make the Mobile header appear “sooner” (on a higher resolution) than what the “tablet landscape” option provides.

My main menu + my logo consume almost the full-width of a 1170px site width so when setting it to tablet landscape there are some resolutions in between 1170px and the “tablet landscape” breakpoint that cause the normal menu to collapse below the logo creating a third row which I don’t like. (I can’t reduce the top level menu items padding since I also need the width set there for the submenus)

Where can I find the breakpoints for the mobile header?

Thanks in advance.

[Rui Guerreiro – SUPPORT]

Hi,

Do you want to show always the mobile menu no matter what resolution?
Or want to increase a little bit more the breakpoint for the mobile header?

-Rui

[Sotiris]

I want to increase it actually, a) to avoid the collapse of the main menu and b) to avoid having a simultaneous dispaly of a mobile menu toggle bar and the normal header + main menu.

I am using Shiftnav Pro for the mobile menu and I can set its breakpoints precisely within its options as well as hide the cardinal mobile menu icon. But I still want the mobile header to coincide with the Shiftnav appearance.

So I need to know where I can set the breakpoint for the mobile header appearance in order to try several values to see which it fits.

[Sotiris]

This seems to do the trick:

@media only screen and (max-width: 1200px) {

.mhs-tablet-land #mobile-top-text, .mhs-tablet-land #mobile-header, 
.mhs-tablet-land #mobile-header-sticky-wrapper {
        display: block;
        }
.mhs-tablet-land .header-wrap, .mhs-tablet-land #top-bar {
		display: none;
	}
}

Another post on Dante forum made me dig a little on some CSS sheets.

Seems to work fine. Should I expect any side effects?

[Rui Guerreiro – SUPPORT]

Hi,

Sorry you got there faster than I 🙂
I guess no risk for side effects. That code only affects that selector in that specific resolution.

-Rui

[Sotiris]

Great! No worries I tend to gather my support questions (for plugins as well) at the end of each day but I still keep looking for a solution on my own. This one would not work for me with the Dante selectors so I thought I had a dead end. Soon after I found the appropriate css file where I took the selectors from.

You are a wonderful support team here anyway!

[Kyle – SUPPORT]

No problem 🙂 glad you managed it

– Kyle