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

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:

Update - from Jan 2021:
We provide a feature to automatically hide your old menu. You can find the button in Smart Menu portal / Tips page:


This feature can only work on some popular Shopify themes. If it doesn't work for you, please follow the steps below to manually hide the old menu.

1. Copy CSS selector of your old menu:

(It's the same way with how you find CSS selector to replace with Smart Menu)

  • Disable Smart Menu on your store


  • Navigate to your store (abc.myshopify.com) > Find your old menu that you want to hide
Example: Original Main menu on header
  • Right click on that menu > Inspect 
CSS inspect - Smart Menu

  • The developer tool will appear and auto detect the HTML tags of your selected menu
Element detect - Smart Menu


  • Find the closest <ul> tag above
ul element - Smart Menu ul element - Smart Menu

  • Right click on <ul> tag > Copy > Copy selector


You've successfully copied the CSS selector of your old menu.
Remember to enable Smart Menu again when you're done.


2. Add this CSS to your theme:

Go to Themes > Actions > Edit code.
Under Assets folder, find the scss (or css) file of your theme, usually theme.scss.liquid (or style.scss.liquid, stylesheet.scss.liquid, main.scss.liquid).



Click on the file name to open that file on the right > scroll down to the bottom > paste the line of code below and replace "yourselector" with the CSS selector you've just copied:
  1. yourselector {
  2. opacity: 0;
  3. }

For example: The CSS selector you copied is "#AccessibleNav". Then paste it like this:





Remember to remove these lines in case you disable Smart Menu. If you don't, your old menu can't show up.

If this is too complicated, please contact us to do it for you.