How to Hide the Mobile Menu Icon in WordPress

Site administrators often wish to hide the mobile menu icon (commonly referred to as the hamburger icon) to customize the navigation structure on mobile devices. This guide explains how to remove this element using custom code.

Understanding the Issue

Responsive WordPress themes typically display a menu icon when viewed on smaller screens. While this is standard behavior, not all themes provide a native setting to disable or hide this icon within the theme options.

How to Hide the Mobile Menu Icon

If the active theme lacks a built-in option to toggle visibility, a custom CSS snippet provides a straightforward solution.

• Identify the CSS class or ID assigned to the mobile menu icon using a browser’s Inspect tool. Common selectors include .menu-toggle or .mobile-menu-icon.
• Navigate to Appearance > Customize > Additional CSS within the WordPress dashboard to insert the code.

Apply the following CSS configuration to hide the element:

/* Hide the mobile menu icon */
.menu-toggle {
    display: none !important;
}

Ensure that .menu-toggle is replaced with the specific class or ID utilized by the current theme.

Additional Tips

• Verify the website’s appearance on a mobile device immediately after applying the code.
• To restore the menu icon, simply remove or comment out the added CSS in the customizer.
• If the correct selector cannot be identified, consult the theme’s documentation or support team for assistance.

Conclusion

Hiding the mobile menu icon allows for greater control over the visual presentation of site navigation. Although a native setting may not be available, the use of custom CSS offers a reliable method for removal. For further assistance, refer to the official theme documentation.