How to Hide a Certain Shopify Menu?

How to Hide a Certain Shopify Menu?

In this post learn how to hide a certain Shopify menu from your Shopify store without break any functionality and design. Check out the guide here.

Step-by-step Guide on How to Hide a Specific Menu in Shopify:

  1. From your Shopify admin dashboard, go to the "Online Store" section and select "Themes."

  2. Find the theme that you want to edit and click the "Actions" button, then select "Edit code."

  3. In the theme editor, navigate to the "header.liquid" file, which controls the header section of your website where the menu is located.

  4. Find the code for the specific menu item that you want to hide. It should be located within an unordered list (<ul>) element with list item (<li>) elements for each menu item.

  5. Add the CSS class "hide" to the specific <li> element for the menu item that you want to hide. For example, if the menu item has the following code:

    <li class="menu-item">
    <a href="#">Menu Item</a>

    You would change it to:
    Copy code

    <li class="menu-item hide">
    <a href="#">Menu Item</a>

  6. In the theme.scss.liquid or the main.scss.liquid file add following code snippet

    Copy code
    .hide{ display: none; }

  7. Save your changes and the specific menu item should now be hidden on the frontend of your website.

If you are using the minimal theme, then you can use the following code to hide the nav menu:

{% if collection.handle == 'wholesale-line-sheet' %}
.site-nav {display: none;}
{% endif %}

Note: If you are using a 3rd party theme, you might not have the ability to access the theme code, In that case you can use an app like Menu Manager to hide a certain menu item.

Wrapping up -

At Ecomheroes, we offer Shopify website design and development services. After following the steps above, you can hide the menu. You can contact our Shopify designers and developers if you still have any problems hiding the menu on your Shopify store. Contact us today for a free consultation.