Compatibility: Dawn Only
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="/" 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
3 comments
The code for some reason isn’t showing correctly. Please fix it!
Oh my goodness! Awesome article dude! Thanks, However I aam experiencing difficulties
with youur RSS. I don’t understand the reason why I can’t subscribe to it.
Is theree anybody having the same RSS issues?
Anyoe that knows the solution will youu kindly respond?
Thanx!! https://Livegamevavada.webgarden.com/
Hello there I am so happy I found your blog page, I really found you bby
error, while I was browsing on Askjeeve for something else, Anywys I am here now and
would just like to say cheers for a incredible post and a
alll round enjoyable blog (I aalso love the theme/design), I don’t have time to read through it all at
the moment but I have savrd it and also added in youir RSS feeds, so when I have time I
will be back too read a lot more, Please do keep
up the great work. https://telegra.ph/Mobile-online-casinos-10-23