Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Creating Mobile Menu

  • Hi there,

    I am working on a mobile menu of the website I will link down in the Private Information Box.

    At the moment it looks like this.

    Questions:
    – Where are the settings to create margins / paddings around the text?
    – How can I center the text in the orange button and influence the size of the button so that it looks similar to the one in the desktop version?
    – How can I change the margins / paddings of the mobile menu before I press the Hamburger icon?
    – How can I change the size of the Hamburger Icon without influencing the size of the menu typo?

    Thank you!

  • Hi there,

    1. to style the button like desktop and add some space around it , use this CSS:

    
    #mobile-header .main-nav ul li:last-child a {
        margin-inline: 15px;
        text-align: center;
        max-width: max-content;
    }
    

    2. for general padding of the mobile header and nav add this CSS:

    
    #mobile-header {
        padding-inline: 20px;
        padding-block: 5px;
    }
    

    3. the mobile hamburger icon size:

    
    #mobile-header .menu-toggle {
        font-size: 28px;
    }
    
  • Thanks so much, David!

    Awesome support and very useful.

    Enjoy the day and talk soon!
    Keno

  • Glad to be of help!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.