Help: Single-dropdown menu error

If you've encountered an issue with the single-dropdown menu overlapping the other links when the links are stacked, we’ll walk you through a fix. As well, this fixes the single-menu initializing between 768 and 1025 when refreshing into that resolution zone.

Note: This fix is for older versions of Loft.

1. Access your themes section
2. Open the Loft theme code
3. Edit code

1. Access your themes section

Login to your Shopify admin, and then click “Online Store” (on the left side of the admin). This takes you to the “themes” area of your Shopify store.

Example themes section

2. Open the Loft theme code

Next, click the button that says “Actions” - followed by “Edit code” which will load the live code editor. It consists of a left hand sidebar, which lists all the files on Loft, along with a right hand code editing panel.

Shopify code editor

3. Edit code

You need to add a few lines of code to three files (theme.scss.liquid, header.liquid, theme.js.liquid).

Do the following steps:

theme.scss.liquid

1. Search for the "Assets" folder
2. Open the "theme.scss.liquid" file
3. On line 764 find the ".single-dropdown" class and the following block of code 

    padding-left:10px;

   And add directly under it this block of code

    z-index:100;

   After

   
4. Click "Save"

header.liquid

1. Search for the "Sections" folder
2. Open the "header.liquid" file
3. On line 162 find this block of code

    {%endfor%}

   Directly under it, add the following block of code to the div tag

    nav-menu-js

   After

   
4. Click "Save"

theme.js.liquid

1. Search for the "Assets" folder
2. Open the "theme.js.liquid" file
3. On line 2418 find this block of code

    mainMenuDropdown: '.main-menu-dropdown',

   And add directly under it this block of code

    generalMenu: '.nav-menu-js',

   After

   

   Note: Don't forget the comma after '.nav-menu-js' because the script will break without that!

4. On line 2968 comment out the following block of code

   $(this._selectors.showMenu + '>' + this._selectors.mainMenuDropdown).show();

   By adding two forward slashes "//" in front of it

   After

   

5. On line 2969, below the modified code of step 4, add the following block of code

   $(this._selectors.showMenu + '>' + this._selectors.generalMenu).show();

   After

   

6. On line 2977 comment out the following block of code

   $(this._selectors.mainMenuDropdown).hide();

   By adding two forward slashes "//" in front of it

   After

   

7. On line 2978, below the modified code of step 6, add the following block of code

   $(this._selectors.generalMenu).hide();

   After

   

8. Click "Save"