Creating a mega menu in Shopify

Creating a mega menu in Shopify

Creating a mega menu is not difficult. if you have some technical skills can be made without an app

Let’s see how to make Mega Menu

Step 1: Create a menu

  • From your Shopify admin, go to Online Store > Navigation > Main menu
  • Now choose the menu item you want to put the mega menu in. In this case, we’ll go with the Catalog.
  • Create sub-menu items by clicking Add menu item at the bottom. Then, drag and drop them under Catalog.

How to Create a menu shopify

Step 2: section header.liquid

From your Shopify admin, go to Online Store > Themes > Actions > Edit code

Then, in the Section directory, open file header.liquid.

Afterwards, scroll to the bottom, copy this code next to the ] and click Save.

How to edit code in shopify


    ,
  "blocks": [
        {
            "type": "logo_image",
            "name": "Mega logo",
            "settings": [
                {
                    "type": "image_picker",
                    "id": "image",
                    "label": "Image"
                },
                {
                    "type": "text",
                    "id": "mega_link",
                    "label": "Select menu",
                    "default": "1"
                },
                {
                    "type": "url",
                    "id": "link",
                    "label": "Main Link"
                },
                {
                    "type": "text",
                    "id": "title",
                    "label": "Title"
                },
                {
                    "type": "text",
                    "id": "subtitle",
                    "label": "Sub title"
                }
            ]
        }
    ]

Step 3: Edit file site-nav.liquid

remove all the old code, replace with this code and click Save.

    

Step 4: Add CSS in theme.css file

paste below code at the bottom of the file

    .site-nav, .site-nav--has-dropdown, .site-header {
position: unset;
}
.site-nav__dropdown {
width: 100%;
left: 0;
right: 0;
background-color: #fff;
}
.site-nav__childlist {
display: block;
}
.site-nav__dropdown .side-bar-menu{
float: left;
text-align: left;
padding-top: 25px;
padding-right: 30px;
padding-bottom: 25px;
width: 150px;
padding-right: 10px;
}
.site-nav__dropdown .side-bar-menu .sidebar-menu-list li a{
text-transform: uppercase;
font-weight: bold;
padding: 0 20px 10px 0;
font-size: 13px;
}
.site-nav__dropdown .middle-menu{
float: left;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 10px;
padding-right: 10px;
width: calc(100% - 370px);
position: relative;
display: flex;
}
.site-nav__dropdown .middle-menu .middle-menu-list{
width: 20%;
float: left;
text-align: left;
position: relative;
padding-top: 27px;
}
.site-nav__dropdown .middle-menu .middle-menu-list p{
position: absolute;
top: 0;
margin-bottom: 0;
width: 100%;
}
.site-nav__dropdown .middle-menu .middle-menu-list span.main-bold-title{
font-size: 13px;
font-weight: bold;
padding: 0 20px 10px 0px;
text-transform: uppercase;
display: block;
color: #000;
}
.site-nav__dropdown .middle-menu .middle-menu-list a.site-nav__child-link{
text-transform: capitalize;
padding: 0 20px 10px 0px;
font-size: 13px;
font-weight: 300;
}
.site-nav__dropdown .image-section{
float: left;
padding-top: 25px;
padding-bottom: 25px;
position: relative;
width: 220px;
height: 100%;
}
.site-nav__dropdown .image-section .img-box{
position: relative;
}
.site-nav__dropdown .image-section .text__section{
position: absolute;
top: 50%;
left: 50%;
width: 90%;
transform: translate(-50%,-50%);
color: white;
}
.site-nav__dropdown .image-section .text__section h3{
font-size: 14px;
text-transform: uppercase;
color: white;
margin-bottom: 5px;
}
.site-nav__dropdown .image-section .text__section p{
font-size: 13px;
text-transform: inherit;
color: white;
font-weight: normal;
}
.site-nav__dropdown .sub-menu-inner-page{
max-width: $width-site;
display: block;
margin: 0 auto;
padding: 0 55px;
overflow: auto;
}
.site-header .grid--table>.grid__item {
vertical-align: bottom;
}
.site-nav {
margin: 0;
}
.site-nav > li {
padding: 20px 0;
}
.site-nav--active-dropdown .site-nav__dropdown {
display: block !important;
}
.img-box .text__section h3,
.img-box .text__section p {
text-align: center;
}
.mega-list-logo a {
padding: 0;
}
.site-nav--has-dropdown:hover .site-nav__dropdown{ display: block !important; } 

Step 5: Add Js in theme.js file

replace function init() with the following code and hit Save.

    function init() {
  cacheSelectors();
  $(selectors.siteNavHasDropdown).on('mouseenter', function() {
        var $el = $(this);
    showDropdown($el);
  });
  $('.site-nav__dropdown').on('mouseenter', function() {
    $(this).show();
        $(this).parent().addClass(config.activeClass);
  });
  $(selectors.siteNavHasDropdown).on('mouseleave', function() {
    hideDropdown(cache.$activeDropdown);
  });
  $('.site-nav__dropdown').on('mouseleave', function() {
        hideDropdown(cache.$activeDropdown);
        $(this).hide();
  });
  cache.$subMenuLinks.on('click.siteNav', function(evt) {
    // Prevent click on body from firing instead of link
    evt.stopImmediatePropagation();
  });
}
function showDropdown($el) {
  $el.addClass(config.activeClass);
  var headerHeight = $('#shopify-section-header').outerHeight(),
      headerNav = $el.find('.site-nav__dropdown').outerHeight();
  $el.find('.site-nav__dropdown').css({top: +headerHeight+ 'px'});
  cache.$activeDropdown = $el;
}
function hideDropdown($el) {
  // remove aria on open dropdown
  $el.removeClass(config.activeClass);
  // reset active dropdown
  cache.$activeDropdown = $(selectors.siteNavActiveDropdown);
  $(selectors.body).off('click.siteNav');
  $(window).off('keyup.siteNav');
}

Step 5: Add an image for mega menu

From your Shopify admin, go to Online Store > Themes > Customize

Click Header on the left side of the screen, then scroll to the bottom, click Add mega logo.

Want to modify or custom changes on store Hire me.
– Feel free to contact me on regarding any help Contact

Leave a Reply

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

Back To Top