Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To hide a mobile menu in WordPress, first use your theme’s Navigation settings. In a block theme, open Appearance → Editor, select the Navigation block in the relevant template or template part, and review its Display and overlay options. If you need the entire navigation hidden at a specific width, add a class to that block and use a scoped media query in Additional CSS. Classic and third-party themes require their own selectors and breakpoint settings.
Decide what should disappear
“Hide the mobile menu” can mean three different things. Choose the intended result before changing settings:
- Change the mobile presentation: keep navigation available but alter the icon, “Menu” label, or overlay behavior.
- Hide only the hamburger button: links must already be visible and usable; otherwise visitors can be left with a collapsed menu they cannot open.
- Hide the whole navigation: remove the menu at a deliberate breakpoint, while providing another route to important pages.
Test the result at the exact widths used by your design. “Mobile,” “tablet,” and “desktop” breakpoints are theme-specific rather than universal WordPress standards.
Block themes: use the Navigation block first
Adjust the built-in mobile presentation
- Go to Appearance → Editor.
- Open the template or template part containing the header.
- Select the Navigation block.
- In the block settings, open Display and inspect the icon button, “Menu” text, icon style, and overlay options.
These controls change how navigation appears on smaller screens. They do not necessarily remove every navigation link at a chosen width. If the requirement is “no navigation below 768px,” use block visibility or CSS instead.
Hide the entire block with a class and CSS
Add a class such as hide-mobile to the Navigation block’s Additional CSS class field. Then open the site’s CSS editor:
- Block theme: Appearance → Editor → Styles → ⋮ → Additional CSS
- Classic theme: Appearance → Customize → Additional CSS
Use a rule scoped to the class:
@media (max-width: 768px) {
.hide-mobile {
display: none !important;
}
}The 768px value is only an example. Replace it with the breakpoint that matches your layout, and apply the class only when hiding the complete block is intentional. CSS customization is an advanced change; keep a record of it so it can be reviewed after a theme change.
Use responsive block controls where supported
WordPress responsive style values are available in block themes running WordPress 7.1 or later. The documented default ranges treat screens 480px wide and narrower as mobile, and widths above 480px through 782px as tablet, but themes can customize those widths. Responsive style settings do not automatically provide a show/hide control for every block, so use a visibility setting when your editor exposes one.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsRank #2
Classic and third-party themes
Find the theme’s own setting
Check the theme’s Header, Menu, Navigation, or Responsive settings before writing CSS. A theme may let you choose a breakpoint, replace the hamburger with an expanded menu, or disable its mobile header entirely.
Identify the real selectors
There is no universal WordPress class for a mobile menu. Inspect the page markup in your browser or follow the theme documentation to identify the toggle button, mobile menu container, or desktop navigation element. Then scope the rule to that selector and breakpoint. For example, one WordPress.org support example uses .header-dropdown above 768px and .header-menu-container at 768px and below; those selectors apply to that particular theme, not to WordPress generally.
After saving CSS, test both menu states. Hiding a toggle while its menu remains collapsed can make the links unreachable, so confirm that the links are visible or that another control opens them.
Rank #3
Choose the right breakpoint
| Goal | Implementation | Important qualification |
|---|---|---|
| Change the icon or overlay | Navigation block Display settings | Changes presentation; does not necessarily remove navigation. |
| Hide one block at a width | Block visibility control or a custom class with media query | Availability depends on the theme, WordPress version, and editor. |
| Hide a classic-theme menu | Theme setting or CSS targeting the theme’s actual markup | Selectors and breakpoints are theme-specific. |
| Replace a weak theme menu | Optional menu plugin | Check current compatibility, accessibility, and pricing before installing. |
Keep navigation accessible
Before hiding anything, make sure visitors can still reach the site’s important pages. WordPress’s Navigation block is designed to provide keyboard navigation, a nav landmark, and appropriate aria-label and aria-hidden attributes. Removing part of that structure with CSS can defeat those benefits if no replacement is provided.
- Tab through the header at desktop, tablet, and phone widths.
- Check that the visible links receive focus in a sensible order.
- Open and close any overlay with the keyboard as well as a pointer.
- Confirm that focus does not remain trapped behind a hidden menu.
- Test the menu in both its open and closed states after caching or minification is enabled.
For overlay-based designs, WordPress Core’s March 4, 2026 note on customizable navigation overlays recommends including a Navigation Overlay Close block. If it is omitted, WordPress inserts a fallback close button for accessibility and usability, although its position or appearance may not match the design.
Optional plugin route
If the theme lacks suitable controls, the WordPress.org directory lists Responsive Menu – Create Mobile-Friendly Menu as a plugin that can use an existing WordPress menu, let you choose the screen size at which it appears, and specify CSS elements to hide while its menu is shown. The directory describes the core plugin as free and lists advanced paid features. Its listing reports “trusted by 70,000+ websites” and a rating of 4.5 stars from more than 570 reviews; those are time-sensitive vendor-directory figures, not independent adoption or performance studies.
Use a plugin only after checking that it supports your WordPress and theme versions. Disable overlapping theme menu scripts where the plugin documentation advises it, then retest keyboard navigation, overlays, caching, and responsive widths.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Fixes when the menu does not hide correctly
The CSS has no effect
- Confirm the class is attached to the intended block or element, not its parent or a different menu.
- Clear page, browser, and CDN caches.
- Inspect the element to verify that the media query matches the current viewport.
- Use a more specific selector only after confirming the theme’s markup; avoid copying selectors from another theme.
The menu disappears but links are inaccessible
Restore the toggle or display the links in an expanded layout. Hiding a button without changing the collapsed menu’s state strands keyboard and touch users.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →The tablet behavior is wrong
Measure the viewport width at which the theme switches modes and align your media query with that value. A theme may use a tablet range different from WordPress’s documented 480–782px example.
The overlay has no usable close control
Add the Navigation Overlay Close block where supported, then test Escape, keyboard focus, and the visible close button. WordPress can provide a fallback close button, but its placement may require design adjustment.
The Bottom Line
Use the Navigation block’s Display settings when you only need to change the mobile presentation. To remove the entire menu, apply a class and a deliberate media query in Additional CSS, or use the theme’s visibility control. In every case, verify that visitors still have a keyboard- and touch-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.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
