Hide a specific menu button in the navigation bar

Shopify Discussion

Topic summary

A user wants to temporarily hide a “Blog” menu item from their navigation bar until the blog is ready, then unhide it later.

Initial Solutions Offered:

  • Navigate to Online Store → Navigation and remove the menu item (though this deletes rather than hides it)
  • Use custom CSS code targeting specific menu classes to hide the element

Key Concern Raised:
Multiple users emphasized wanting to hide (not delete) menu items to avoid recreating them later. One user expressed frustration that Shopify lacks a simple hide/unhide toggle for menus, similar to the visibility option available for pages.

Working Solution (Dawn Theme):
For Dawn theme users, inspect the navigation element to find its ID (e.g., #Details-HeaderMenu-1), then add CSS code with display: none !important; to the component.mega-menu.css file.

Additional Resources:

  • A third-party app called “Menu QoL” was recommended for easier menu management
  • A comprehensive step-by-step guide was shared covering various hiding scenarios

The discussion remains open with ongoing frustration about Shopify’s lack of native hide/unhide functionality for menu items.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
6

No…thats a bad answer! The poster said HIDE…not delete. Am having similar. I want to HIDE…as in… make it UNavailable for now… all menus except for Contact Us …for now..Thats it! That should be easy…But not forever delete it so..I dont have to recreate the $#!!$ things. Thats all I want to do. No messing with liquid code etc etc

Hidden / visible under Pages is there but doesnt work for menus. Why cant it be same for menus…a Hide/Unhide option… Edit and Delete are there! What am I missin here. tks!

6 Likes