Transform Your Mobile Menu Hamburger Icon into a Full Button in GeneratePress

If you find the default mobile menu hamburger icon in GeneratePress a bit too plain, here’s a quick way to transform it into a more engaging button with a menu label. This process will take less than 5 minutes.

Step 1: Verify Menu Plus Module is Activated

Before diving into the customization, make sure that the Menu Plus module is activated. Go to Appearance > GeneratePress and ensure that this module is enabled. This step is essential to achieve the desired customization.

Step 2: Add a Menu Label

1. Navigate to the Customizer.
2. Switch to the Mobile View to see how the menu looks on mobile devices.
3. Go to Layout > Primary Navigation.
4. The first option you’ll see is the Mobile Menu Label. Here, you can type the text you want to display next to the hamburger icon. For example, type Menu.
5. You’ll now see the word Menu next to the hamburger icon. This might be enough for some users, but if you want to go further, let’s turn this into a button.

Step 3: Write Custom CSS

To transform the hamburger icon and label into a button, add the following CSS:

1. Go to Additional CSS in the Customizer.
2. Add the following CSS code:

#mobile-header .menu-toggle {
    background-color: white;
    line-height: 2em;
    border-radius: 5px;
    color: #333;
    font-weight: bold;
    margin-right: 15px;
}

This code does the following:

• Adds a white background color to the menu button.
• Sets the line height to make the button’s size more appropriate.
• Adds a border radius for rounded corners.
• Sets the text color to dark gray (#333) to contrast with the white background.
• Boldens the text to make it more readable.
• Adds a right margin to ensure the button isn’t too close to the edge of the screen.

Step 4: Add Background Color to the Navigation Bar

To ensure the navigation bar is visible, especially if it’s transparent by default, add this line of CSS:

#mobile-header .main-navigation {
    background-color: #333;
}

This sets the navigation bar background color to dark gray (#333), making it easier to see and more user-friendly.

Result

After making these adjustments, your mobile menu should now be a more prominent, user-friendly button with a label that’s easy to tap and read. With just a few tweaks and lines of CSS, you’ve transformed the default hamburger icon into something much more functional and visually appealing.

This quick enhancement helps to make the mobile experience smoother and more engaging for your users.