Mega Menu in Dawn Theme

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

 

Color Swatch for Dawn with Images- No App or Subscription needed

Add a color swatch to your Dawn Theme for FREE. Color swatch comes with image. Multiple design av...

Add Custom Textfield / Dropdown in Dawn Theme Shopify 2.0 - No APP needed

Add a personalize textbox to Dawn product page. You can add dropdown, radio buttons and many more...

Convert Dawn Product Page Like Debut Theme with Product Slider

Product slider but counter does not make sense? See my way around. Transform your Dawn product pa...

How to make hero image the background for header - DAWN Theme

Hero image to be the background for header. It is possible. Just follow the steps below. I recomm...

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

3 comentários

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

Deixe um comentário