WordPress: How to style the Gutenberg navigation menu block for mobile

The latest navigation menu block in WordPress disappears when you try to edit it with developer tools outside of the browser view-port. This prevents me from writing CSS inside of developer tools and watching my changes take effect immediately. Bad!

// Force the modal to stay open by overriding the close function
// Change 'modal-1' to your navigation menu block element's ID
const modal = document.getElementById('modal-1');
if (modal) {
    // Remove the attribute that controls visibility (if present)
    modal.classList.add('has-modal-open', 'is-menu-open');
    modal.style.display = 'flex';

    // Remove all event listeners that might close the modal
    // (This is a hack: clone and replace the node)
    const newModal = modal.cloneNode(true);
    modal.parentNode.replaceChild(newModal, modal);

    // Prevent focusout from closing the modal
    newModal.addEventListener('focusout', function(e) {
        e.stopPropagation();
    });

    // Prevent click events from closing the modal
    document.addEventListener('click', function(e) {
        if (!newModal.contains(e.target)) {
            e.stopImmediatePropagation();
        }
    }, true);

    // Optionally, keep re-adding the open classes every second (in case React tries to close it)
    window.keepMenuOpen = setInterval(() => {
        newModal.classList.add('has-modal-open', 'is-menu-open');
        newModal.style.display = 'flex';
    }, 500);
}

@media screen and (max-width: 1080px) {

  /* hiding desktop nav */
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }

  /* displaying mobile nav */
  .wp-block-navigation__responsive-container-open {
    display: block !important;
  }

}

Are you having problems customizing your WordPress mobile navigation block menu? Can’t style it because it keeps disappearing when clicking outside of it? Irritated? Ready to rage? Yeah, #meToo. 😂

My hacked solution is to simply open developer tools as usual and then paste this JavaScript code into the developer tools console.

After you paste in the JavaScript snippet, the WordPress navigation menu block will stop disappearing when clicking outside of it, and you can finally style it with some CSS in developer tools without it disappearing every time. If you refresh the page, however, you will need to paste the snippet back into the console. This is a quick and easy hack for now. It’s [current-year] 2025 and this is what we must do. We’re still in the, “Hack the shit together and just make it work.” phase, I see. Let’s go!!! Problem solved??? For now…

For anyone else banging their head on the desk because of WordPress Gutenberg’s navigation menu block hiding itself and preventing you from styling the CSS as usual, this code snippet is for you. I hope it spares you the headache I got from this.

Just be sure to change your ID to the ID of your navigation element, whatever that may be. Mine turned out to be #modal-1. Now, this could all change after the next WordPress update (who knows?), so we’ll just have to wait and tweak if necessary.

Now, what if we have anchor links on our WordPress block menu mobile navigation?

I’m currently working on rebuilding a classic WordPress site into a modernized Gutenberg block theme. This is a site that utilizes a hybrid 1-page-nav layout along with a few sub pages in the main navigation, so it’s a peculiar case. My mobile WordPress navigation block menu does not automatically hide itself after clicking on an anchor link within the mobile navigation. It scrolled to the section, but would not automatically hide the menu after clicking.

This is also not ideal. Welp, I had to write some more code that automatically hides the mobile navigation and scrolls to the anchor link after clicking. In 2025, WordPress is much more of a hassle than it used to be, but it seems the possibilities are growing once you deep-dive into scaffolding your own block plugins. I’m still on the WordPress train for now because I’ve built some pretty sweet plugins with it so far.

For anchor links, hide the mobile navigation after clicking

You’ll only need this if you are using same-page anchor links (such as single page sites) to automatically hide your mobile navigation menu after an item is clicked. We obviously don’t want the mobile menu to display after we click an anchor link because the mobile menu overlay still hides the content. Well, WordPress didn’t seem to think about coding this into their navigation system, so we have to manually hide the menu ourselves with more bloat scripts. Edit your CSS classes in the script as necessary.

/* hide the mobile overlay menu when a link is clicked
    because some are anchor links on the home page */
$('.wp-block-navigation__responsive-container .wp-block-navigation__container a').on('click', function(e) {
    var href = $(this).attr('href');
    if (!href) return;

    // Check if it's a same-page anchor
    var currentUrl = window.location.origin + window.location.pathname;
    var linkUrl = this.href.split('#')[0];
    if (
        (href.startsWith('#')) ||
        (linkUrl === currentUrl && href.includes('#'))
    ) {
        var $closeBtn = $('.wp-block-navigation__responsive-container-close:visible');
        if ($closeBtn.length) {
            setTimeout(function() {
                $closeBtn.trigger('click');
            }, 200);
        }
    }
});

Do you want your WordPress navigation block custom styled so it looks great on desktop, tablet and mobile viewports?

You’re going to need a badass 1337-human for that. WordPress is simply not there yet for normies. It might be mostly WYSIWYG, but not entirely.

I was simply trying to figure out how to style the WordPress navigation menu block to my liking, but once again, sorry Dave, I can’t do that!

Any web developer knows that we all use developer tools to inspect elements of the page and modify them. Try doing that to a WordPress navigation menu block below about 1,000 pixels width in the view-port, so that the page is rendering a mobile view.

Any time you click outside of the mobile navigation menu overlay, such as clicking into your developer tools window to change something, the navigation instantly disappears due to a stock WordPress script, which results in you not being able to style the menu on-the-fly like you would normally.

This is frustrating!

Don’t even think about styling the mobile navigation inside the Gutenberg full site editor block settings options. Not gonna happen because it is quite limited.

So far, the best workaround I’ve discovered to style the mobile WordPress navigation menu block is to paste some JavaScript code into your developer tools console that disables WordPress’ automatic mobile menu hiding. Of course, you will only run this in your developer tools console, so it allows you to style the menu traditionally with the browser’s developer tools and doesn’t hide itself every time you click somewhere else!

What a hassle! Not to mention all the funky exorbitantly long and complex CSS class chains that we need to sort through and overwrite with !important tags. Gotta love modern WordPress! Tons of inline CSS and no one knows where the fudge it is coming from. 😆

Just add an !important tag, fuggit, dood! Forget digging into WordPress’ 6 million lines of inline CSS to find a mile long CSS path that takes precedence over their initial default styles.

I get an !important tag! You get an !important tag! Everything gets an !important tag! Just kidding… kind of, but after 2 hours of experimenting with different classes that don’t take effect, I just said time is money and use !important because I’m so tired of WordPress lego blocks dot syntax limitless-length CSS class chains. Remember the days of targeting the main nav with something like .menu or .header-nav and it just worked so easily because you didn’t have to compete with 50 other inline CSS styles? Everybody knows inline CSS takes precedence unless you use an !important tag in your external CSS, or some crazy class chains.

Who needs custom navigation menu icons, because everyone wants the same generic hamburger icon, amirite?

I pasted this in my jQuery scripts file for my theme. If you want different icons, just go to https://iconmonstr.com/ and grab one. They give you the SVG code directly on the site.

// Changing default navigation Open toggle button to custom SVG
$('.wp-block-navigation__responsive-container-open').each(function() {
    // Replace the inner HTML with custom SVG
    $(this).html(`
        <svg width="56" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.65 32"><path d="M25.04,29.91c0-1.15.93-2.09,2.09-2.09h26.43c1.15,0,2.09.93,2.09,2.09s-.93,2.09-2.09,2.09h-26.43c-1.15,0-2.09-.93-2.09-2.09ZM0,16c0-1.15.93-2.09,2.09-2.09h51.48c1.15,0,2.09.93,2.09,2.09s-.93,2.09-2.09,2.09H2.09c-1.15,0-2.09-.93-2.09-2.09ZM11.13,2.09c0-1.15.93-2.09,2.09-2.09h40.35c1.15,0,2.09.93,2.09,2.09s-.93,2.09-2.09,2.09H13.22c-1.15,0-2.09-.93-2.09-2.09Z"/></svg>
    `);
});

// Changing default navigation Close toggle button to custom SVG
$('.wp-block-navigation__responsive-container-close').each(function() {
    // Replace the inner HTML with custom SVG
    $(this).html(`
        <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,13.57L29.07.5c.33-.33.77-.5,1.21-.5.92,0,1.71.74,1.71,1.71,0,.44-.17.88-.5,1.22l-13.07,13.07,13.07,13.07c.34.34.5.77.5,1.21,0,.98-.8,1.71-1.71,1.71-.44,0-.88-.17-1.21-.5l-13.07-13.07L2.93,31.5c-.33.33-.77.5-1.21.5C.8,32,0,31.26,0,30.29,0,29.85.17,29.41.5,29.07l13.07-13.07L.5,2.93c-.33-.34-.5-.77-.5-1.22C0,.74.79,0,1.71,0,2.15,0,2.59.17,2.93.5l13.07,13.07Z"/></svg>
    `);
});

There is currently no stock way to customize the icon of your WordPress mobile navigation menu. You get two lackluster mobile menu icon options. 🙄

One might say the navigation is one of the most important elements of a website, but it seems WordPress lightly brushed over this part of their new FSE CMS. How’s that for an acronym?

As of now, the navigation block menu sucks and it has required me to invest several additional hours of work into figuring out how to make the menu actually work the way I want. Of course, I hacked together another solution to change my mobile menu navigation icons to what I want, so I didn’t have to use some generic cookie cutter icons that are on nearly every single WordPress site now. Eghhh… 🤢

I’ve resorted to replacing the SVG icons with some simple jQuery entered into one of my main JavaScript files for my theme. Pretty straightforward here and easy to tweak by adding in your own SVG code. Don’t forget width and height attributes!

Rebuilding a mega menu is a-whole-nother story and I have not started diving into mega menus for WordPress Gutenberg yet. One baby step at a time, I guess. My first thought is that it seems like a mega menu will need its own custom developed block plugin, meaning lots of development time. Sure, there are some amazing menu plugins out there already, but I like doing things the hard way sometimes and not relying on other plugin developers. It’s not fun installing and uninstalling a bunch of plugins that may or may not do the simple task I want.

I really hope WordPress improves the native Gutenberg block menu functionality because at this current state it is about a 5 out of 10, if you are into theme customization. For simple themes that don’t need many enhancements, you could get by with the default native shipment of WordPress, but if you’re serious about your business, odds are you will want something custom and unique to your brand. Good luck achieving total theme customization without the help of a web developer. One could also try some of the free and premium themes available, but they will still require customization and hours of time invested to overcome the learning curve. The average user could easily become frustrated as hell and scrap WordPress Gutenberg block editor because they can’t even configure mobile styles without having the knowledge of a web developer. WordPress can fix this by implementing some type of system that applies different styles for desktop, mobile, and tablet views. Adding a few CSS media query breakpoints could improve this issue, so hopefully this can be implemented in the future. As of my writing this, the full site editor provides these three different device previews already, but they do not apply styles for the different views when making changes in the editor.