How to Make Custom Shopify Mega Menu in Dawn Theme

Step 1: Access the Theme Code

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Find your active theme (e.g., Dawn), click on Actions, then Edit code.

Step 2: Modify the Header Section

1. In the Sections directory, open header.liquid.

Step 3: Add Mega Menu HTML Structure

Locate the part of the header.liquid file where the navigation menu is rendered. This is usually within a {% for %} loop that iterates through the navigation links. Modify it to include your mega menu structure.

Here’s an example of how to integrate a basic mega menu:

<ul id="main-menu" class="main-menu">
  {% for link in linklists.main-menu.links %}
    <li class="menu-item{% if link.childlinks.size > 0 %} has-dropdown{% endif %}">
      <a href="{{ link.url }}" class="menu-link">{{ link.title }}</a>
      {% if link.childlinks.size > 0 %}
        <div class="mega-menu">
          {% for sublink in link.childlinks %}
            <div class="mega-menu-section">
              <h3>{{ sublink.title }}</h3>
              <ul>
                {% for childlink in sublink.childlinks %}
                  <li><a href="{{ childlink.url }}">{{ childlink.title }}</a></li>
                {% endfor %}
              </ul>
            </div>
          {% endfor %}
        </div>
      {% endif %}
    </li>
  {% endfor %}
</ul>

Step 4: Add CSS for Styling the Mega Menu

Add the following CSS to your base.css or theme.css file to style the mega menu:

/* Mega Menu Styles */
.main-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu-item {
  position: relative;
  margin-right: 20px;
}

.menu-link {
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}

.mega-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 200px;
}

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

.mega-menu-section {
  margin-bottom: 20px;
}

.mega-menu-section h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.mega-menu-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu-section ul li {
  margin-bottom: 10px;
}

.mega-menu-section ul li a {
  text-decoration: none;
  color: #333;
}

.mega-menu-section ul li a:hover {
  text-decoration: underline;
}

Step 5: Add JavaScript for Menu Functionality

Add the following JavaScript to your theme’s JavaScript file, usually located in assets:

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu-item.has-dropdown');

  menuItems.forEach(item => {
    item.addEventListener('mouseenter', function() {
      const megaMenu = this.querySelector('.mega-menu');
      if (megaMenu) {
        megaMenu.style.display = 'block';
      }
    });

    item.addEventListener('mouseleave', function() {
      const megaMenu = this.querySelector('.mega-menu');
      if (megaMenu) {
        megaMenu.style.display = 'none';
      }
    });
  });
});

Step 6: Configure Navigation Links

1. Go to Online Store > Navigation in your Shopify admin.
2. Create a new menu or modify an existing one to include links and sub-links that will be displayed in the mega menu.
3. Ensure the menu handle matches the handle used in your code (main-menu in the example).

Summary

By following these steps, you can create a custom mega menu in the Shopify Dawn theme:

1. Modify the header section to include the mega menu HTML structure.
2. Add CSS for styling the mega menu.
3. Add JavaScript for the menu functionality.
4. Configure navigation links in the Shopify admin.

This approach allows you to create a visually appealing and functional mega menu that enhances the navigation experience on your Shopify store.