Menu Icon for tablet

Hi Russ,

Thanks for reaching out!

I think the solution you’re looking for is to change the breakpoint. Right now, the navigation converts to a hamburger menu for mobile screens (which are around 600px wide or smaller). However, it seems you want it to convert to a hamburger menu on larger screens, such as tablets (1024px wide). By default, WordPress does not offer a built-in option to set a custom breakpoint, but we can achieve this using custom CSS.

Here’s the CSS you can use:

/* Display mobile menu icon for screens smaller than 1024px */
@media (max-width: 1024px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }
}

/* Ensure the desktop menu displays for screens 1024px and above */
@media (min-width: 1024px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
}

You can add this CSS to the Additional CSS field in editor.

1. Log in to your WordPress Dashboard.

2. Navigate to Appearance > Customize.

3. Select the Additional CSS section from the Customizer menu.

4. Paste the above CSS code into the text area provided.

5. Click save.

This will:

• Convert the menu to a hamburger icon for screens smaller than 1024px (e.g., tablets and smaller devices).
• Keep the full desktop menu for screens 1024px and wider.

You can also change the 1024px value to fit your specific needs. If you want the menu to switch at a different width (e.g., 900px or 1200px), feel free to modify the 1024px value in the CSS accordingly.

After adding this, make sure to clear your browser cache (and any caching plugins if you’re using one) to see the changes applied.

Thanks,

Could you please share your website link so I can check why it’s not working and provide CSS adjustments if any tweaks are needed?

Hey,

I just used the same CSS, but changed the min-width and max-width to 1152, and it seems to be working fine on your website.



here is what CSS I use.

/* Display mobile menu icon for screens smaller than 1152px */
@media (max-width: 1152px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }
}

/* Ensure the desktop menu displays for screens 1152px and above */
@media (min-width: 1152px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
}

Here are the steps you can follow to retry adding the CSS or troubleshoot:

1. Ensure CSS is saved: Make sure the CSS is saved properly in the “Additional CSS” section of the Site Editor. After saving, reload the page to see the changes.

2. Clear cache or hard reload: Clear your browser cache or perform a hard reload to ensure you’re not seeing cached styles.

3. Check through console log: Use the browser’s developer console to check if the saved CSS is appearing in the browser and confirm it is not being overwritten by other styles.