Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

How to Recreate Generatepress responsive Header/menu

Home Forums Support How to Recreate Generatepress responsive Header/menu

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #184624
    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

    #184728
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #185367
    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!

    #185385
    Tom
    Lead Developer
    Lead Developer

    You could try:

    @media (max-width: 1059px) {
        .main-navigation {
            display: none;
        }
        .main-navigation.mobile-header-navigation {
            display: block;
            opacity: 1;
        }
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.