How to Disable the Hamburger Menu on Mobile for your Secondary Navigation in GeneratePress

If you’ve ever used the secondary navigation feature in the GeneratePress theme and found that it automatically collapses into a hamburger menu on mobile devices, you’re not alone. Sometimes, you may want those secondary navigation links to remain visible rather than collapsing into a menu. In this tutorial, I’ll show you how to disable the hamburger menu for the secondary navigation on mobile and simply display the links as they are.

Step 1: Setting Up Secondary Navigation

On my demo site, I have GeneratePress Premium activated, along with the secondary navigation module. You can see the secondary navigation bar at the top, which includes a “Call Us Today” button. By default, when you view this on mobile, it collapses into a hamburger menu. But in this case, I want to display the “Call Us Today” button without collapsing it into the menu.

Step 2: Modify Theme Functions

To stop the secondary navigation from collapsing on mobile, you need to make a small modification to your theme’s functions file. Here’s how:

1. Go to the Appearance section of your WordPress dashboard and click on Theme File Editor.
2. Make sure you’re using a child theme. If not, I highly recommend setting one up to ensure your changes are safe from future theme updates.
3. In the child theme, locate the functions.php file.
4. Copy the following PHP code (provided by GeneratePress documentation) and paste it into your functions.phpfile:
   add_action( 'wp_enqueue_scripts', function() { if ( function_exists( 'generate_secondary_nav_get_defaults' ) ) { $generate_secondary_nav_settings = wp_parse_args( get_option( 'generate_secondary_nav_settings', array() ), generate_secondary_nav_get_defaults() ); if ( 'nav-float-right' === $generate_secondary_nav_settings['secondary_nav_position'] ) { wp_add_inline_style( 'generate-style', '.secondary-navigation .menu-toggle {display: none;} .secondary-navigation .main-nav {display: block !important;}' ); } } } );
5. After pasting the code, hit Update File.

Step 3: Add Custom CSS

Now that we’ve disabled the hamburger menu functionality with PHP, we need to adjust the CSS to ensure the secondary navigation links are displayed properly.

1. Go to Appearance > Customize > Additional CSS.
2. Paste the following CSS:
   .secondary-navigation .menu-toggle { display: none; } .secondary-navigation .main-nav { display: block !important; }
3. This code will ensure that the secondary navigation is always visible and doesn’t collapse into a hamburger menu.

Step 4: Center the Links on Mobile

If you want to center the secondary navigation links on mobile devices, you can easily adjust the alignment through the customizer.

1. In the WordPress Customizer, go to Layout > Secondary Navigation.
2. Under Navigation Alignment, select Center.
3. Hit Publish to save your changes.

Now, your secondary navigation links will be centered on mobile, tablet, and desktop views.

Optional: Center Only on Mobile

If you prefer to center the secondary navigation links only on mobile, you can add the following custom CSS:

@media (max-width: 768px) {
    .secondary-navigation .main-nav {
        text-align: center;
    }
}

Conclusion

This simple tweak will ensure that your secondary navigation remains visible on mobile devices without collapsing into a hamburger menu. It’s a useful customization for those who want a consistent navigation experience across all devices. Adding this code to your starter site will save you from future frustration, ensuring that all your secondary navigation menus behave as expected.