Shopify - Qikify Menu App | How to disable your old menu from showing up during site refresh

Web Hosting Talk
1

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

Table of contents

  • ⋅[1. Copy CSS selector of your old menu:](javascript::wink:
  • ⋅[2. Add this CSS to your theme:](javascript::wink:

To achieve the best user experience, Shopify will always load 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:

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
      tag above

    ul element - Smart Menuul element - Smart Menu

    • Right click on
        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 file of your theme, usually theme.scss.liquid (or style.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.

      Updated: 05 Mar 2019 04:00 PM

      Curated by Liquid Layer Networks

      At Liquid Layer Web Hosting [LiquidLayer.net], we’ve made a shared web hosting platform that’s both feature-rich and easy to make use of. Our programmers have built up a custom Linux cloud web hosting platform plus an innovative Control Panel that perfectly takes advantage of its capabilities. After long hours of programming and bug fixing on our end, we are now capable to guarantee that all of our shared web hosting services are safe, virus-free, full of capabilities and very easy-to-work-with. In addition, they feature 99.9% server uptime as well as 99.9% network uptime warranties.

      Powered by:

      HostCheetah Networks
      Global Web Hosting, Domain Registration, and Internet Services
      https://hostcheetah.net | http://hostcheetah.uk

      PC Helper | Est 1996 - Web Hosting | US, AU, UK, Finland, Bulgaria | :sunglasses:
      https://pchelper.com