How to Recreate Generatepress responsive Header/menu

[Martin Spicer]

Hi,

I have been looking all over on how to recreate the Generatepress’s websites header and menu but can’t seem to figure it out.

Its the responsive features that im looking to recreate where the menu item spacing gets smaller as you get to tablet size (clever :)) then the hamburger menu kicks in when you get to mobile view. Without any of the menu items going onto two lines etc.

I have tried the css found at https://gist.github.com/generatepress/c23aef2d05807c39bb32

and altered the max-width to around a 1000px but I seem to get no menu at all between 1000 and mobile size (768px) using the css above.

How can I recreate the Generatepress’s website header to behave the same way?

thanks for all your help

Martin

[Tom]

Hi Martin,

I’m using this small snippet of CSS to decrease the width of my menu items when I hit a certain width:

@media (max-width:880px) {
	.main-navigation ul li a {
		padding: 0 10px !important;
	}
}

Is that what you’re looking for?

Let me know 🙂

[Martin Spicer]

Thats brilliant thanks so much Tom! how can I change it so the normal header and menu turns off and the Mobile header and hamburger menu turns on? I was trying to do something like this

@media (max-width:1059px) {
        .mobile-header {
                display: initial;
        }
}
@media (max-width:1060px) {
        .main-navigation ul li a {
                display: none;
        }

but it doesnt seem to work, Have you any ideas? thank you so much!

[Tom]

You could try:

@media (max-width: 1059px) {
    .main-navigation {
        display: none;
    }
    .main-navigation.mobile-header-navigation {
        display: block;
        opacity: 1;
    }
}

[Author]

Posts