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.
(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
- The developer tool will appear and auto detect the HTML tags of your selected menu
- Find the closest <ul> tag above
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:
- yourselector {
- opacity: 0;
- }
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.
Related Articles
Why is my Smart Menu not showing up or showing incorrectly?
There are various reasons why Smart Menu is not showing up or showing incorrectly on a store. Please read these cases and check the following solutions. Loading time Our server is placed in the US, therefore, there might be a delay in loading time ...
Frequently Asked Questions for Smart Menu
What is the difference among Free, Basic and Premium plans ? Please see the comparison table of three plans here. Can I downgrade to Free/Basic plan after upgrading? Yes you can. To cancel paid plans, please go to "Profile" page > click on "Cancel ...
How to uninstall Smart Menu completely?
UPDATE (30.11.2023): With users installing our app after November 30, 2023, the app does not add any code or store any file in the theme anymore. Therefore, you don't need to delete anything after uninstalling the app. When installing, Smart Menu ...
How to show Smart Menu on your store
After creating your menu in Smart Menu, you can choose a current menu on your store to be replaced with Smart Menu. There are 2 ways to do it: Auto - Replace Main menu, Manual - Replace menu from Shopify or Manual - Replace menu by CSS selector. ...
Why is my bar not showing up?
There are various reasons why the bar is not showing up on a store. Please read these cases and check the following solutions. The bar is not activated By default, when you successfully create a bar, it is deactivated. (only the first created bar is ...