Shopify features and tools
dawn theme mega menu

Shopify Mega Menu in Dawn Theme

Log in or Sign up to ensure access to FREE code across multiple devices.

Compatibility: Dawn version 2.5 and lower

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.

5. Find "header__inline-menu", delete the code as shown in the video. Paste the code below.

6. Go all the way down, before the last "]", add the code below.

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.

 

8. In the header.liquid, paste the code at the top. See the video.

 

 

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!

Struggling with instructions?

Don't worry, we've got you covered for a reasonable price.

Contact us through "Chat with us" for a quote.

Relax as we handle it for you!

Back to blog

6 comments

Hi,

Please check the compatibility before following the tutorial.

Made4Uo

it is not working dawn-9. My website voova.com

Fawez

Menu isnt showing on mobile

goh

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

Made4Uo

Code works for the most part, but the background color seems to be transparent, how can I change that

Phillip j Cheney

Leave a comment