How to create shopify mega menu code

shopify mega menu code is a combination of html, css, js source codethat you can add to your website. You can use this free mega menu code to add to your project. This article will guide you on how to create and insert mega menu code in your website.

In this example, I will create a simple mega menu including a drop down menu, and images. Based on this example, you can customize it so that it can be suitable for your store and your hobby as well.

Create mega menu code

To facilitate the process of editing code, you could use software such as như note notepad++, phpdesigner, etc. Or you can open directly the Shopify’s file in the back end of Shopify.

In this example, we use phpdesigner to edit code. We will add shopify mega menu code to the website if everything is okay after testing.

Create index.html file with the following content

<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>

Create style-megamenu.css file with the following content

* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Mega Menu header, if needed */
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Style links inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

We will test the menu by opening index.html file on the browser. If there is any problem that needs to be edited, you edit it the file you have created.

Add code to Shopify

To keep your website safe, you duplicate the theme, and try this mega menu on the duplicated theme.

shopify mage menu code

We can use Preview status of Shopify by clicking on Action button. In the list of drop down menu, you click on preview as below. In this status, only you can see the changes on the website when you add mega menu code. This will be safe because your customers are not affected. And if there is something wrong with the interface, nobody knows this.

shopify mage menu code

Next, we will edit code

shopify mage menu code

Depending on the place you want the menu to be displayed, you select a proper file to edit. In this example, I use the default Debut theme. I will add Shopify mega menu code to the existing main menu of the theme.

Add html code to theme

In the Debut theme, the following code helps display the menu {% include ‘site-nav’ %}

Now, you open header.liquid file, search for code {% include ‘site-nav’ %} in line 177 of the original theme. We will edit this code as {% include ‘mega-menu’ %}

shopify mage menu code

Next, in Snippets, you click on Add a new snippet, enter texts “mega-menu”, and click on Create snippet

shopify mage menu code

In mega-menu.liquid file, you add all the html contents in index.html file we have prepared in the first step and save them.

shopify mage menu code

Add css to theme

Add these codes {{ ‘mega-menu.css’ | asset_url | stylesheet_tag }} to theme.liquid file

shopify mage menu code

In Assets, click on Add a new asset. A popup shows up, you click on Create a blank file. Enter the name of “mega-menu” file, choose format as “.css”, click on Add asset bordered in red.

shopify mage menu code

Next, enter the content of style.css file to mega-menu.css file just created, then save this.

shopify mage menu code

 

Now, you enjoy the result in the front end.

We have just created shopify mega menu code and add it to the website. This way in not time-consuming, you just need to copy and use the codes. But it is extremely difficult for people who do not know about codes. If you do not know about codes, I suggest that you should use mega menu app. When you use this app, you just need to drag and drop to create a menu. There are many menu types so that you can show your creativity. You can refer to this link https://apps.shopify.com/globo-mega-menu to try using the demo. Of course, your menu will be much more attractive. I really recommend you to use this app.