Shopify Tutorial – Creating Mega Dropdown Menu

Shopify Tutorial – Creating Mega Dropdown Menu

119
0



There are many ways to create a mega dropdown menu in Shopify but this is just one way to do it with a little bit of code on most themes.

If you’re using one of the free Shopify themes, it will probably work fine. We’re using the Debut theme for this demo.

1. Go to Themes. On your theme, click on “Action” and then “Edit Code”

2. Go to “Assets” folder, and find one of the .css or .scss files, which is usually named “theme.scss.liquid”. Depending on your theme, it may also be something like “style.scss.liquid”.

3. Click on the file, and scroll all the way down to the bottom of it. Copy and paste the following code.

/*================ Mega Dropdown Menu ================*/
.site-nav–has-dropdown
position: static;

.site-nav
position: relative;

.site-nav–active-dropdown .site-nav__dropdown
width: 100%;
ul
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;

The tutorial in text http://bit.ly/2pCv2B1

Open your own online Shopify store:
http://bit.ly/2IQyWyX

Leave a Reply

Your email address will not be published. Required fields are marked *