My old menu is still showing up, how can I hide it?

To achieve the best user experience, Shopify always loads your website first, and then apps, that's why your old navigation still appears.
If you want to hide your old navigation, please follow these steps:

Copy CSS selector of your old menu:

- Disable Smart Menu on your store

- Go to your storefront to find the theme's menu that you want to hide

- Right-click on any element in the menu to inspect

- The developer tool will appear. Here you need to find the correct HTML element of your theme's menu.
When you hover over HTML elements in the development tool, the corresponding element will be highlighted with the blue color on the storefront.

- Right-click on that element in the development tool > Copy > Copy selector

Add the CSS code to your theme:

- Access your theme's code

- Here you need to find the CSS file in assets folder.
For example, with Dawn theme, it is base.css file

Different themes have different CSS files. If you can't find the correct CSS file to add the code, please contact us to help you.

- Open that file > scroll down to the bottom > add the below code

yourselector {
  opacity: 0;
}

You need to replace yourselector with the menu selector you copy in the previous step.
For example, the menu selector of the Dawn theme is .list-menu.list-menu--inline
So, the code you need to add is:

.list-menu.list-menu--inline {
  opacity: 0;
}

- Save and your theme's menu will be invisible when the site loads.

Remember to remove those CSS lines in case you do not use Smart Menu. If you don't, your old menu can't show up.

If this is too complicated, please contact us to help you.

Updated on: 26/02/2025