[Resolved] Use mobile menu for medium sized devices

[Adam]

Hello,

I am noticing that the medium sized device breakpoint for the navigation menu causes the menu to break and look strange. This only seems to happen on the sites I have using the generatepress site template ‘sider’. This doesn’t seem to happen on my other generatepress sites, they all just swap between the mobile and desktop sized menus based on screen width, there is no medium sized device menu.

Is there a way to make my ‘sider’ sites act as the default generatepress theme does by using the mobile menu for medium sized devices? Perhaps an edit to the additional css?

Thank you,

[Tom]

Hi there,

You can initiate the mobile header at a wider width using some CSS like this: https://generatepress.com/forums/topic/mobile-header-size-tablet-view/#post-541540

Let me know 🙂

[Adam]

Hey Tom,

I added that CSS with the minor changes Jesse posted to enable the drop down as well as

@media (min-width: 769px) and (max-width: 1024px) {
.main-navigation {
background-color: #;
}
} 

so that the medium menu background color wasn’t inherited from my transparent desktop menu.

and it seemed to initiate the mobile header properly but it keeps the spacing from the sider header when viewed on medium devices like the ipad pro.

I poked around in the sider CSS within the additional CSS area and changed the first line

@media (min-width: 1025px) {
	body {
		padding: 0 50px 50px;
		margin-left: 300px;
	}

to 1025px instead of 1000px to match the menu breakpoints. That seemed to fix the issue, was that the correct course of action?

Thank you.

[Tom]

Yep – that’s perfect! 🙂

[Author]

Posts