Compatibility: Dawn Only
For updated code that works with any Shopify 2.0 Free themes, see link here.
Add a mega menu or header in your Dawn Shopify theme. No app or subscription needed. Personalized the mega-header to your liking. Add multiple images.
Creating a mega menu without an app made possible.
1. Go to Admin Shopify store > Themes > Actions > Edit Code.
2. In Section folder, create a new section, and name it "mega-header".
3. Open the header.liquid under the Section folder.
4. Find the "menu-drawer__navigation" with <nav> tag and delete the code, replace it with the code below.
<nav class="megaContainer--tablet"> <div class="megaHeader megaHeader--tablet"> {% for block in section.blocks %} {% assign blockIndex = forloop.index0 %} {% if block.settings.title == 'Home' %} <a class="megaA" href="/pt" style="width: 100%; text-align: left;">{{block.settings.title}}</a> {% else %} <div class="megaDrawer" style="width: 100%;"> {% if block.settings.mega_url != blank %} <a class="drawerbtn megaA" href="{{block.settings.mega_url}}" style="width: 100%; justify-content: space-between;">{{block.settings.title}}</a> {% else %} <label for="megaDrawerInput--{{forloop.index0}}" class="drawerbtn drawerbtn--tablet" style="width: 100%; justify-content: space-between;"> {{block.settings.title}} {% if block.settings.mega_link != blank %} <svg viewBox="0 0 10 10" class="svgDd megaSvg" data-svg="svgDd--{{forloop.index0}}"> <path d="M5,6 L5,6 L2,3 L5,6 L5,6 L8,3" /> </svg> <svg viewBox="0 0 10 10" class="svgClose megaSvg" data-svg="svgClose--{{forloop.index0}}"> <path d="M2,2 L5,5 L8,8 L5,5 L8,2 L2,8" /> </svg> {% endif %} </label> <input type="checkbox" id="megaDrawerInput--{{forloop.index0}}" onclick="checkInput(this)" data-input="{{forloop.index0}}"> <div class="megaDrawerContent--tablet"> {% if block.settings.title != blank %} <div class="megaDrawerHeader megaDrawerHeader--tablet" style="background-color: {{block.settings.header_bg}}"> <h2>{{block.settings.header_title}}</h2> </div> {% else %} <div class="megaDrawerHeader megaDrawerHeader--tablet" style="background-color: inherit;"></div> {% endif %} <div class="megaDrawerWrapper--tablet"> {% if block.settings.mega_link != blank %} <div class="megaLinkContainer" style="flex-direction: column; width: 100%;"> {% for link in block.settings.mega_link.links %} <div class="megaLinkBox--tablet" {% if link.links == blank %} style="padding: 0 5%" {% endif %}> {% if link.links == blank %} <a class="megaLink" href="{{link.url}}">{{ link.title | escape }}</a> {% else %} <label for="megaLink--{{blockIndex}}-{{forloop.index0}}"> <span >{{ link.title | escape }}</span> <span class="arrowDown"> <svg viewBox="0 0 10 10" class="childSvgDd megaSvg" data-svg="childSvgDd--{{blockIndex}}-{{forloop.index0}}"> <path d="M5,6 L5,6 L2,3 L5,6 L5,6 L8,3" /> </svg> <svg viewBox="0 0 10 10" class="childSvgClose megaSvg" data-svg="childSvgClose--{{blockIndex}}-{{forloop.index0}}"> <path d="M2,2 L5,5 L8,8 L5,5 L8,2 L2,8" /> </svg> </span> </label> <input type="checkbox" id="megaLink--{{blockIndex}}-{{forloop.index0}}" onclick="checkInput(this)" data-child-input="{{blockIndex}}-{{forloop.index0}}"> {% endif %} <div class="childLinkContainer"> {% for child_link in link.links %} <a href="{{child_link.url}}">{{child_link.title | escape }}</a> {% endfor %} </div> </div> {% endfor %} </div> {% endif %} </div> </div> {% endif %} </div> {% endif %} {% endfor %} </div> </nav> |
5. Find "header__inline-menu", delete the code as shown in the video. Paste the code below.
{% assign mega_img_file = section.settings.mega_drawer_image | strip_html | downcase | parse_json | append: '}' | prepend: '{' %} <nav class="megaContainer" style="{% if section.settings.logo_position == 'top-center' %} grid-area: 2/-3; {% endif %} "> |
6. Go all the way down, before the last "]", add the code below.
,{ "type": "richtext", "id": "mega_drawer_image", "label": "Enter the mega-link images", "default": "<p> first-second-third.jpg, firstname.png, Firstname.gif<\/p>", "info": "Use '-' if it is a two-word image name. File extension must match the file uploaded. Separate the image with comma. See default" } ], "blocks": [ { "name": "mega header", "type": "mega_header", "settings": [ { "type": "checkbox", "id": "mega_width", "default": false, "label": "Drawer full-width" }, { "type": "url", "label": "mega url", "id": "mega_url", "info": "Provide link if no drawer" }, { "type": "text", "label": "mega url title", "id": "title" }, { "type": "text", "label": "mega header", "id": "header_title" }, { "type": "color", "label": "header color", "id": "header_bg" }, { "type": "image_picker", "label": "mega image", "id": "mega_image" }, { "type": "range", "label": "mega image size", "id": "mega_image_size", "default": 15, "max": 100, "min": 10 }, { "type": "link_list", "label": "mega link", "id": "mega_link" }, { "type": "product", "label": "mega product", "id": "mega_product" } ] } |
7. Open the Asset folder, and Add a new asset. Name it ''mega-header", and paste the code below. Change the root colors to personalize.
:root { --drawer-background: #f0eff1; --parent-link-bg: black; --dark-color: black; /* font color and icon color */ --light-color: white; /* font color and icon color when hovered */ --gray-color: #b1b0b5; /* background color when hovered */ } /* CSS in header */ .header { padding-top: 0 !important; padding-bottom: 0 !important; } .megaContainer > * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: var(--dark-color); } .megaContainer--tablet > * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: var(--dark-color); } .megaContainer { display: flex; } .megaHeader { overflow: hidden; font-family: Arial, Helvetica, sans-serif; display: flex; } .megaHeader > a { float: left; font-size: 16px; color: var(--dark-color); text-align: center; padding: 0 10px; text-decoration: none; } .megaDrawer { float: left; overflow: hidden; display: flex; } .megaDrawer .drawerbtn { font-size: 16px; border: none; outline: none; padding: 0 10px; font: inherit; margin: 0; display: flex; background: transparent; align-items: center; } .megaHeader > a:hover, .megaDrawer:hover .drawerbtn { color: white; background-color: var(--parent-link-bg); /* background color of the tabs when hovered */ } .megaDrawerContent { display: none; max-width: 95%; /* width of the whole dropdown container */ border-radius: 5px; overflow: hidden; box-shadow: 0px 10px 10px 0px rgb(0 0 0); z-index: 4; background-color: var(--drawer-background); /* background color of the drawer */ } /* ====== HELPERS ======*/ .absolutePosition { position: absolute; left: 50%; top: 70%; transform: translateX(-50%); } .alignCenter { align-items: center; justify-content: center; } /* ====== HELPERS ======*/ .megaDrawerContent .megaDrawerHeader { padding: 5px 10px; color: var(--light-color); } .megaDrawerHeader { white-space: nowrap; } .megaDrawerHeader h2 { margin: 0; font-size: 20px; } @media only screen and (min-width: 1000px) { .megaDrawer:hover .megaDrawerContent { display: block; } } .megaLinkBox { float: left; line-height: 1; } .megaLinkContainer { display: flex; justify-content: center; } .megaLink{ font-weight: 600; } .megaLink:hover { text-decoration: underline; } .megaLinkBox > a { float: none; color: var(--parent-link-bg); padding: 5px; text-decoration: none; display: block; font-size: clamp(14px, 1vw, 16px); overflow-wrap: break-word; } .megaLinkBox a:not(:first-of-type):not(:first-child):hover { background-color: var(--gray-color); } .megaLink { text-align: center; } .megaDrawerWrapper { display: flex; justify-content: space-around; flex-direction: column; overflow: auto; } .megaProduct { display: flex; gap: 15px; margin: 10px; } .megaProductImage { display: flex; flex-direction: column; justify-content: center; } .megaProductInfo { display: flex; flex-direction: column; justify-content: center; white-space: nowrap; } .megaProductInfo > * { font-size: clamp(1rem, 1vw, 1.6rem); } .megaImage { width: 100%; display: flex; align-items: center; justify-content: center; } .megaImage img { margin: 1%; } @media screen and (max-width: 1000px) { .megaContainer { display: none; } } /*==== TABLET size ====*/ .megaHeader--tablet { width: 100%; flex-direction: column; align-items: flex-start; padding: 5%; } .megaA { text-decoration: none; color: var(--dark-color); } .megaDrawer { align-items: flex-start; flex-direction: column; } .megaDrawer > input { display: none; } .megaDrawer > input:checked + .megaDrawerContent--tablet{ display: block; } .megaDrawerContent--tablet { display: none ; width: 100%; padding: 5%; } .megaDrawerHeader--tablet { display: flex; justify-content: center; } .megaDrawer:hover .drawerbtn svg{ stroke: var(--light-color); } .megaDrawerWrapper--tablet { display: flex; } .arrowDown > *{ width: 20px; margin-left: 5px; } .childLinkContainer { display: none; flex-direction: column; margin-left: 10%; white-space: initial; } .megaLinkBox--tablet a { text-decoration: none; color: var(--dark-color); } .megaLinkBox--tablet > a { font-weight: 600; } .megaLinkBox--tablet a:hover { text-decoration: underline; } .megaLinkBox--tablet > input { display: none; } .megaLinkBox--tablet > label > span { font-weight: 600; } .megaLinkBox--tablet > label { display: flex; padding: 0 5%; justify-content: space-between; } .megaLinkBox--tablet > label:hover { color: var(--light-color); background-color: var(--gray-color); } .megaLinkContainer > .megaLinkBox--tablet > input:checked + .childLinkContainer { display: flex; } /*======= ICONs ======*/ .megaSvg { fill: none; stroke: var(--dark-color); display: flex; width: 25px; } .drawerbtn--tablet svg > path { transition: all 700ms ease-out; } .svgClose { display: none; } .megaDrawer:hover .svgDd path { d: path("M2,2 L5,5 L8,8 L5,5 L8,2 L2,8"); } .drawerbtn:hover .svgClose path { d: path("M5,6 L5,6 L2,3 L5,6 L5,6 L8,3"); } .megaDrawer:hover .drawerbtn--tablet > svg { stroke: var(--light-color); } .megaLinkBox--tablet:hover label { color: var(--light-color); background-color: var(--gray-color); /* background color of the tabs when hovered */ } .drawerbtn--tablet { width: 30px; height: 30px; position: relative; } .arrowDown { width: 30px; height: 30px; position: relative; display: flex; } .arrowDown svg > path { transition: all 1s ease-out; } .childSvgClose { display: none; } .megaLinkBox--tablet:hover .childSvgDd path { d: path("M2,2 L5,5 L8,8 L5,5 L8,2 L2,8"); } .megaLinkBox--tablet:hover .childSvgClose path { d: path("M5,6 L5,6 L2,3 L5,6 L5,6 L8,3"); } .megaLinkBox--tablet:hover .arrowDown> svg { stroke: var(--light-color); } .megaLinkBox--tablet > input:checked ~ label > span.arrowDown > svg.childSvgDd { display: none; } .megaLinkBox--tablet > input:checked ~ label > span.arrowDown > svg.childSvgClose { display: block; } .megaLinkImage { width: 100%; display: flex; justify-content: center; } .megaLinkImage img{ width: 100px; aspect-ratio: 1; } |
8. In the header.liquid, paste the code at the top. See the video.
{{ 'mega-header.css' | asset_url | stylesheet_tag }} |
That's it. All you need is to is edit the theme editor and add your images. See video on how to add the images
4 comentários
Menu isnt showing on mobile
Hi @Ali,
The code might not be working on a newer version of Dawn.
Hi @Phillip,
There should be an option in your theme editor to change the color of the header as shown on the video
Code works for the most part, but the background color seems to be transparent, how can I change that
The code for some reason isn’t showing correctly. Please fix it!