dawn theme mega menu

Mega Menu in Dawn Theme

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: '{' %}
{% assign sample_img = sample | file_url %}

<nav class="megaContainer" style="{% if section.settings.logo_position == 'top-center' %} grid-area: 2/-3; {% endif %} ">
<div class="megaHeader alignCenter">
{% for block in section.blocks %}
{% if block.settings.title == 'Home' %}
<a class="megaA drawerbtn" href="/">{{block.settings.title}}</a>
{% else %}

<div class="megaDrawer alignCenter" style="height: 50px">
{% if block.settings.mega_url == blank %}
<button class="drawerbtn">{{block.settings.title}}
<span> <svg viewBox="0 -.5 11 10" class="megaSvg">
<path d="M5,6 L5,6 L2,3 L5,6 L5,6 L8,3" />
</svg>
</span>
</button>
{% else %}
<a class="megaA drawerbtn" href="{{block.settings.mega_url}}">{{block.settings.title}}</a>
{% endif %}
{% if block.settings.mega_link != blank %}
<div class="megaDrawerContent absolutePosition"
style="width: {% if block.settings.mega_width == true %} 95% {% else %} min-content {% endif %};
{% if section.settings.logo_position != 'middle-left' %} top: 100%{% endif %}">
{% if block.settings.title != blank %}
<div class="megaDrawerHeader"
style="background-color: {{block.settings.header_bg}}">
<h2>{{block.settings.header_title}}</h2>
</div>
{% else %}
<div class="megaDrawerHeader"
style="background-color: inherit;"></div>
{% endif %}

<div class="megaDrawerWrapper">
{% if block.settings.mega_link != blank %}
<div class="megaLinkContainer">
{% for link in block.settings.mega_link.links %}
<div class="megaLinkBox" style="padding: 10px">
<div class="megaLinkImage" data-mega-image="{{link.title | downcase | replace: ' ', '-' }}" >

</div>
<a {% if link.links == blank %}
class="megaLink"
href="{{link.url}}" {% else %} style="font-weight:600; text-align: center"{% endif %}>{{ link.title | escape }}</a>
{% for child_link in link.links %}
<a href="{{child_link.url}}">{{child_link.title | escape }}</a>
{% endfor %}
</div>
{% endfor %}
</div>
{% endif %}
{% if block.settings.mega_product != blank %}
<a href="{{block.settings.mega_product.url}}" style="text-decoration: none">
<div class="megaProduct">
{%- assign product_media = block.settings.mega_product.selected_or_first_available_variant.featured_media | default: block.settings.mega_product.featured_media -%}
<div class="megaProductImage">
<img src="{{product_media | img_url: master }}" alt="{{product_media.alt | escape }}">
</div>

<div class="megaProductInfo">
<h4 style="margin: 0 0 5%;">{{block.settings.mega_product.title | escape}}</h4>
<p style="margin: 0;">{{block.settings.mega_product.price | money}}</p>
</div>
</div>
</a>
{% endif %}
{% if block.settings.mega_image != blank %}
{% if block.settings.mega_image_link != blank %}
<a href="{{block.settings.mega_image_link}}">
{% endif %}
<div class="megaImage">
<img src="{{block.settings.mega_image | img_url: 'master'}}" alt="{{block.settings.mega_image.alt | escape }}" style="width: {{block.settings.mega_image_size}}%;">
</div>
{% if block.settings.mega_image_link != blank %}</a>{% endif %}
{% endif %}
</div>
</div>
{% endif %}

</div>
{% endif %}
{% endfor %}
</div>
</nav>
<script>
function checkInput (input){
const inputNum = input.dataset.input;
const childInputNum = input.dataset.childInput;
if(inputNum) {
console.log(inputNum);
if(input.checked == true) {
document.querySelector(`[data-svg="svgDd--${inputNum}"]`).style.display = "none";
document.querySelector(`[data-svg="svgClose--${inputNum}"]`).style.display = "block";
} else {
document.querySelector(`[data-svg="svgDd--${inputNum}"]`).style.display = "block";
document.querySelector(`[data-svg="svgClose--${inputNum}"]`).style.display = "none";
}
}
if(childInputNum) {
console.log(childInputNum);
if(input.checked == true) {
document.querySelector(`[data-svg="childSvgDd--${childInputNum}"]`).style.display = "none";
document.querySelector(`[data-svg="childSvgClose--${childInputNum}"]`).style.display = "block";
} else {
document.querySelector(`[data-svg="childSvgDd--${childInputNum}"]`).style.display = "block";
document.querySelector(`[data-svg="childSvgClose--${childInputNum}"]`).style.display = "none";
}
}
}

const megaImgRaw = "{{mega_img_file}}";
const megaImgSplit = megaImgRaw.split(/[,]/).map(col => col.replace(/[\"\s{}]/g, '')).map(s => s.split('.'));
const megaImgJSON = Object.fromEntries(megaImgSplit);

const megaLink = "{{sample_img}}";

window.onload = function () {
const megaImage = document.querySelectorAll('.megaLinkImage');
megaImage.forEach(function(image) {
for(const img in megaImgJSON) {
const imageBox = document.querySelector(`[data-mega-image="${img}"]`);
if (image.dataset.megaImage == img) {
const imgUrl = `${[img]}.${megaImgJSON[img]}`
const assetImgUrl = megaLink.split('?')[0] + `${imgUrl}`;
imageBox.insertAdjacentHTML(
'beforeend',
`<img src="${assetImgUrl}" alt="${assetImgUrl} + '.' + 'alt'">`);
}
}
})
}
</script>  

 

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

 

Copied!
Back to blog

3 comments

The code for some reason isn’t showing correctly. Please fix it!

Ali

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/

casino App

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

https://Telegra.ph

Leave a comment