Style Mobile Menu

I’m also having the same issue; it immediately resets when you click anywhere in dev tools. So yeah, I feel your frustration.

• This reply was modified 9 months, 2 weeks ago by Wutime.

Hi folks – in terms of Chrome Dev tools – what I can suggest is that you can use the :hov button to activate pseudo states like hovering so the menu will stay open.

https://developer.chrome.com/docs/devtools/css#pseudostates

Thanks @jordesign, but it’s not a :hover menu on mobile and doesn’t seem to work with any other psuedo states. I’ve only had this problem with the 2023 and 2024 themes for some reason. That method definitely works on other themes but still disappears every time you go to dev tools on these. That’s why I’d be curious to look at the structure and CSS of the new nav. Any thoughts on how to get that info? Thanks.

Hi @doodl – I see what you mean.

I had some luck figuring it out with the Chrome inspector – it looks like the selector you can use is .wp-block-navigation__responsive-container

You can also check out this screenshot for more of an idea of the structure and other selectors in that modal view of the menu.

looks like im not alone. @jordesign – how did you inspect element and kept the modal box open to see the mobile menu structure?

Hery @bryanvelow – I wasn’t able to use the ‘inspect’ button (or right click) to keep it open. But what I was able to do was have the inspector open while I triggered the menu, and then look through the HTML view in the inspector.

Oh thanks… Really hard to style!!!! You should look up for that class, wp-block-navigation__responsive-container and then, if you’ve set a class for the default desktop item, go for it inside that one. It’s like a duplicate container inside the modal.

• This reply was modified 9 months ago by gonzaloalcina.

@jordesign, That’s it! To clarify for other, I added:

has-modal-open is-menu-open

in the HTML to the existing class:

wp-block-navigation__responsive-container

See attachment with highlights. I hope this helps others. Take care.

Hey @doodl! It’s possible to trigger the menu once you have the inspector open, and then keep working on it. I recorded this video showing what I did:

@properlypurple – For whatever reason my browsers do not do that. As soon as i select an element, the mobile menu disappears. Can you be more specific about what tools you are using? Are you Mac or PC? What version of Chrome? Seems like there is a disconnect somewhere.

I’m using:

• 2020 Mac M1 Sonoma 14.1.1 (23B81)
• 1) Brave Version 1.61.120 Chromium: 120.0.6099.234 (Official Build) (arm64)
• 2) MS Edge Version 120.0.2210.144 (Official build) (arm64)

@properlypurple, @doodl, my browser doensn’t do it either. I’m on Mac too.
I can’t style submenus on mobile …

@mtoy64 here’s what I suggest. Try typing or pasting (if your devtools lets you) this into your console and running it.

jQuery(‘html’).addClass(‘has-modal-open’);
jQuery(‘.wp-block-navigation__responsive-container’).addClass(‘has-modal-open is-menu-open’);

You can refresh your browser page to close it again. If you drop your cursor in the console log you can use your arrow key to click the up arrow to rerun it (hit enter when it shows again).

• This reply was modified 3 months, 3 weeks ago by Dexter Adams.

Here’s the non jQuery equivalent way of doing it, just paste this into the console:

// Add classes to the menu container to simulate it being open
const mobile_menu = document.querySelectorAll('.wp-block-navigation__responsive-container');
mobile_menu[0].classList.add('has-modal-open');
mobile_menu[0].classList.add('is-menu-open');

// Set necessary attributes to ensure it stays open
document.querySelector('.wp-block-navigation__responsive-dialog').setAttribute('aria-modal', 'true');
document.querySelector('.wp-block-navigation__responsive-dialog').setAttribute('aria-label', 'Menu');
document.querySelector('.wp-block-navigation__responsive-dialog').setAttribute('role', 'dialog');

Quite painful developer experience tbh.

Thanks a lot. I ‘ll try that. I didn’t get through yet.

I agree it is difficult. So I created a custom block using this code

<?php

function modify_navigation_block_output($block_content, $block) {
    // Check if the block is a navigation block
    if ($block['blockName'] === 'core/navigation' && $block['attrs']['className'] === 'q-navigation-mobile') {
        // Convert block attributes to HTML
        $block_attributes = '';
        if (!empty($block['attrs']) && is_array($block['attrs'])) {
            foreach ($block['attrs'] as $attr_key => $attr_value) {
                $block_attributes .= ' ' . esc_attr($attr_key) . '="' . esc_attr($attr_value) . '"';
            }
        }

       // Your custom HTML
       $custom_html = '<div class="mobile-menu-top-bar">
        <div class="wp-block-site-logo">
            <a href="https://localhost:10009/" class="custom-logo-link" rel="home" aria-current="page">
                <img
                    width="60"
                    height="20"
                    src="https://localhost:10009/wp-content/uploads/2024/09/logo.webp"
                    class="custom-logo"
                    alt="spanish lessons edinburgh logo"
                    decoding="async"
                    srcset="https://localhost:10009/wp-content/uploads/2024/09/logo.webp 469w, https://localhost:10009/wp-content/uploads/2024/09/logo-300x102.webp 300w"
                    sizes="(max-width: 60px) 100vw, 60px">
            </a>
        </div>
        <div>
            <button
                aria-label="Close menu"
                class="close-btn"
                data-wp-on--click="actions.closeMenuOnClick"
                style="display: block;">
                <img src="https://localhost:10009/wp-content/uploads/2024/10/cross.png" />
            </button>
        </div>
</div>
';
       // Fnd the position of the first occurrence of <ul> tag
       $ul_position = strpos($block_content, '<ul');

       // Insert custom HTML before the <ul> tag
       if ($ul_position !== false) {
           $block_content = substr_replace($block_content, $custom_html, $ul_position, 0);
       } else {
           // Log if <ul> tag is not found
           error_log('Navigation Block: <ul> tag not found');
       }
    }

    return $block_content;
}
add_filter('render_block', 'modify_navigation_block_output', 10, 2);

And then this CSS

header {
  .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .mobile-menu-top-bar {
    width: 95%;
    display: flex;
    justify-content: space-between;
    height: 65px;
    padding: 20px;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    padding-top: 0px;
  }

  .has-modal-open .wp-block-navigation__responsive-dialog {
    margin-top: 0px !important;
  }

  .wp-block-navigation__responsive-container-close {
    display: none;
  }

  .close-btn {
    background-color: white;
    border: none;
  }

  .q-navigation-desktop {
    display: none;
  }

  @media (min-width: 782px) {
    .q-navigation-desktop {
      display: flex;
    }
    .q-navigation-mobile {
      display: none;
    }
  }

  .header-row-container {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .wp-block-navigation__container {
    gap: 5px;
  }

  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
    flex-wrap: nowrap;
  }

  .wp-block-navigation .wp-block-navigation-item__label {
    padding-left: 10px;
    padding-right: 10px;
  }

  .wp-block-navigation .wp-block-navigation-item__label {
    font-family: 'Open Sans';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
}

/* Hamburger Mobile Navigation */
.wp-block-navigation {
  .wp-block-navigation__responsive-container.is-menu-open {
    padding: 0px;
    background-color: $primary;

    &.has-modal-open {
      width: 100vw;
      // padding: 20px 10px 20px 10px;
    }

    .wp-block-navigation__responsive-container-content {
      align-items: center;

      .wp-block-navigation__container {
        align-items: center;
      }

      ul {
        width: 100%;
        li.wp-block-navigation-item {
          align-items: center;
          color: black !important;
          background-color: $background-grey !important;
          background: $background-grey !important;
          width: 100%;
          padding-bottom: 0.4rem;
          .wp-block-navigation-item__label {
            color: black !important;
          }
        }
      }
    }

    .wp-block-button__link {
      // width: 200px;
      // height: 60px;
      padding: 10px 40px;
      font-size: 26px;
    }

    ul.wp-block-navigation__container {
      > li > a.wp-block-navigation-item__content {
        font-size: 32px !important;
      }

      > li.wp-block-navigation-item > a > span.wp-block-navigation-item__label {
        font-size: 32px;
      }
    }
  }

  .wp-block-navigation__responsive-container-close {
    color: $primary;
    &:focus {
      outline: 0 !important;
      outline: none !important;
    }
  }
}

ul.wp-block-navigation__submenu-container {
  li.wp-block-navigation-item {
    .wp-block-navigation-item__label {
      text-transform: uppercase;
      font-family: 'Inter';
    }
  }
}

.wp-block-woocommerce-mini-cart {
  visibility: visible !important;
}

@media screen and (min-width: 781px) {
  ul {
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }
}

This gave me a fairly basis hover over menu which works fine.

The custom block is to change the structure of the HTML so I could have the site logo there too.

Hopefully that helps.

Would be good to see this worked on in 2025 theme so I hopefully don’t have to do this again !