Free tools Windows power users keep installed
One-click scans. No signup required.
To hide a WordPress mobile menu, first identify whether your site uses a block theme or a classic/third-party theme. In a block theme, edit the Navigation block under Appearance → Editor and use its display or visibility controls. If your theme does not provide the required control, add a class to the menu and hide that class at a deliberate breakpoint with Additional CSS. Classic themes require their own menu selectors, so copying a CSS class from another theme is unsafe.
Before hiding anything, confirm that visitors still have a usable route to your important links. Hiding only the hamburger button can leave a collapsed menu inaccessible; hiding the entire navigation can remove the only path to other pages.
Decide what you actually want to hide
“Hide the mobile menu” can mean three different changes:
- Hide the hamburger button: the button disappears, but the links must remain visible in another layout.
- Hide the mobile overlay: the slide-out or full-screen panel is removed while a desktop-style menu remains.
- Hide the whole navigation at a width: both the toggle and its links disappear. Provide another link path, such as a visible header link, footer navigation, or a replacement menu.
Choose the narrowest change that meets your design goal. A menu that is hidden with CSS is still present in the editor, but it will not be available to visitors at the affected viewport.
Block theme: use the Navigation block first
Change the mobile presentation
- Open Appearance → Editor.
- Open the template or template part containing the header.
- Select the Navigation block.
- Open its Display and overlay-related settings. Depending on the WordPress and theme version, you can choose an icon button or “Menu” text, select an icon style, and choose when the overlay appears.
- Save, then test the header at the exact widths your visitors use.
These controls change how the Navigation block presents mobile navigation; they do not necessarily remove all navigation at a breakpoint.
Hide the entire block with a class and CSS
When the editor has no suitable visibility control, add a class to the Navigation block:
Rank #2
- Select the Navigation block and open its advanced settings.
- Enter
hide-mobilein Additional CSS class(es). - For a block theme, open Appearance → Editor → Styles → ⋮ → Additional CSS. (A classic theme uses Appearance → Customize → Additional CSS.)
- Add this rule and save:
@media (max-width: 768px) {
.hide-mobile {
display: none !important;
}
}The class name is yours to choose. The rule is an example for hiding the whole targeted block; it is not a universal selector for every WordPress theme. Apply it only to the navigation you intend to remove.
Use built-in responsive visibility when available
WordPress responsive style controls are documented for block themes and require WordPress 7.1 or later. The documented default range treats screens 480px wide and narrower as mobile, with tablet widths above 480px through 782px; themes can customize these widths. Responsive style values do not replace a separate show/hide-block setting, so check that your theme exposes an actual visibility control before relying on them.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Rank #3
Classic or third-party theme: find the real selector
Open the theme’s header, menu, or responsive settings before writing CSS. If no setting exists, inspect the page markup in your browser or consult the theme documentation. Identify the element for the mobile toggle, the desktop navigation, or the menu container, then scope the rule to that selector and breakpoint.
For example, a WordPress support answer uses .header-dropdown above 768px and .header-menu-container at 768px and below. Those selectors belong to that particular theme example; they should not be copied unless your markup uses the same classes.
/* Example only: replace selectors with those from your theme */
@media (max-width: 768px) {
.your-mobile-menu-selector {
display: none !important;
}
}Save the CSS, clear any page or CDN cache, and test both sides of the breakpoint. Also test the menu open and closed, portrait and landscape orientations, and a keyboard-only visit.
Do not strand keyboard and screen-reader users
The WordPress Navigation block is designed to provide responsive behavior, keyboard navigation, a <nav> landmark, and aria-label and aria-hidden attributes. Replacing or hiding pieces of that block can remove those protections.
Recommended Free Tools
- If you hide only the toggle, make sure the links are visible and keyboard reachable.
- If you hide the whole navigation, provide another reachable route to the same destinations.
- When using an overlay, verify that it has a visible close control and that focus does not become trapped behind it.
- Check the result at mobile, tablet, and desktop widths after every theme or plugin update.
WordPress 7.0 introduced customizable Navigation Overlays in the Site Editor. The Navigation Overlay Close block is recommended; if it is omitted, WordPress inserts a fallback close button for accessibility and usability, although its position or styling may not match your design.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Choose the route that fits your site
| Route | Best for | Breakpoint control | Main trade-off |
|---|---|---|---|
| Navigation block Display settings | Block themes that need a different mobile presentation | Theme/editor controlled | May change the overlay rather than remove navigation |
| Block class plus Additional CSS | Hiding a specific block at a known width | Your media query | Requires maintenance after template changes |
| Classic-theme settings | Themes with their own header controls | Theme controlled | Labels and behavior vary by theme |
| Theme-specific CSS | Sites with no adequate setting | Your selector and media query | Selectors can change with a theme update |
| Responsive Menu plugin | Themes that lack usable mobile-menu controls | Plugin setting | Adds another component to maintain |
When a plugin is the better fallback
The WordPress.org listing for Responsive Menu says it can use an existing WordPress menu, let you choose the screen size at which its menu appears, and specify CSS elements to hide while that menu is shown. The listing describes the core plugin as free and advanced features as paid. It also reports “trusted by 70,000+ websites” and 4.5 stars from more than 570 reviews; those are time-sensitive directory figures and vendor listing claims, not independent adoption or quality studies.
Use a plugin when the theme’s controls cannot express the required desktop/tablet/mobile behavior. Confirm that it preserves keyboard access, supplies a reliable close action, and does not create two competing navigation systems.
Testing checklist
- Test just below and just above your chosen breakpoint, not only at one phone preset.
- Confirm that desktop links remain visible at desktop widths.
- Open and close the menu, then reload with the menu initially closed.
- Tab through the header and verify that every visible control receives focus in a sensible order.
- Use a screen reader or accessibility checker to confirm the navigation landmark and labels remain meaningful.
- Clear caches and retest after changing the theme, Navigation block, or menu plugin.
The Bottom Line
Use the Navigation block’s own controls when possible. If you must hide a menu at a width, target a class or selector that belongs to your site, set an explicit breakpoint, and preserve a visible, keyboard-accessible path to the site’s links.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
