How can I create a wide mega menu with images in the Dawn theme?

Store Design

Topic summary

The original poster wants to create a wide mega menu with images in Shopify’s Dawn theme, similar to an attached reference image.

Proposed Solutions:

  • Custom Code Approach: One user provided detailed HTML and CSS code snippets to manually build the mega menu structure, including navigation markup and styling for multi-column layouts with images. However, implementation details remain unclear as the code appears partially corrupted or reversed in the thread.

  • Third-Party Apps: Another suggestion recommends installing mega menu apps from the Shopify App Store (like “Mega Menu” or “Mega Menu Pro”) for easier configuration without coding. These apps typically offer drag-and-drop interfaces to add images, set up columns, and customize layouts.

  • Video Tutorial: A free video tutorial link was shared that reportedly works across all Shopify themes.

Open Questions:

The discussion remains unresolved regarding specific file locations in Dawn theme. One user asks which file to edit and notes they couldn’t find the <nav class="site-nav"> element in the header.liquid file for Dawn 12, indicating potential compatibility issues with the provided code solution.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hi,
Regarding Dawn theme, how to create a wide mega menu with images same as the menu in the attached image. is there any app or way to get the same menu.

Thanks in advance.

MegaMenu.png
MegaMenu.png1613Ă—573 89 KB

2
  1. Look for the section of code that generates the menu. It might look like this:

Replace the existing menu code with the following HTML structure for a wide mega menu with images:


​

  • Save the changes you made to the file.

  • Next, you’ll need to add some CSS to style the mega menu. In the theme editor, navigate to the “Assets” folder and find the file named “theme.scss.liquid.” Click on it to open the file for editing.

  • Add the following CSS code at the end of the file to style the wide mega menu:

.site-nav .main-menu {
  display: flex;
  justify-content: space-between;
}

.site-nav .menu-item {
  position: relative;
}

.site-nav .mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  z-index: 999;
}

.site-nav .menu-item:hover .mega-menu {
  display: block;
}

.site-nav .mega-menu-column {
  width: 25%;
  float: left;
}

.site-nav h4 {
  font-size: 16px;
  margin-bottom: 10px;
}

.site-nav ul li {
  list-style: none;
  margin-bottom: 10px;
}

.site-nav ul li a {
  display: flex;
  align-items: center;
  color: #000;
  text-decoration: none;
}

.site-nav ul li a img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
1 Like
3

  1. Install and configure a Mega Menu app: There are several third-party apps available on the Shopify App Store that offer advanced mega menu features. Look for apps like “Mega Menu” or “Mega Menu Pro” and install one that suits your requirements. These apps provide additional customization options for creating wide mega menus with images.

  2. Customize the mega menu layout: Once you have installed a Mega Menu app, follow its documentation or instructions to configure the mega menu layout. Typically, you’ll have options to choose the number of columns, add images, set up links, and customize the appearance of the mega menu.

  3. Upload and assign images: Prepare the images you want to use in your mega menu and upload them to your Shopify store. In the Mega Menu app settings, you should be able to assign specific images to the menu items or categories you want to showcase.

4

Checkout this free Video tutorial which will work on All Free Themes of Shopify 14.0.0https://youtu.be/tTvgl8s8PYk

5

Hi Ranazain2626,

Thanks for this snippet of HTML/CSS to create a mega menu with images. I think that should work.

What file will I find “” in? I looked in header.liquid but did not find anything. I’m using Dawn 12.

Thanks,

Verna