🚀 Struggling with Mega Menu Magic — Need a Push to Make It Work!

[AbhishekK111]

Hello everyone, I'm trying to make a mega menu in my store(Dawn theme) with the help of this video (video). But every time, I get an error.
Can someone please provide some code or guidance to create a mega menu like the one shown in the picture?

[Dotsquares · Accepted solution]

hi @AbhishekK111 

If you're using the Dawn theme and getting errors while following the video tutorial, it might be due to recent updates in the theme or a small mistake in the code.

here's a basic structure for a mega menu in Dawn:

• Go to header.liquid in your theme files.
• Inside the navigation loop, look for the menu item you want to turn into a mega menu.

Wrap the submenu in a div like this:

{% if link.links.size > 0 %}
  <div class="mega-menu">
    <ul>
      {% for child_link in link.links %}
        <li>
          <a href="{{ child_link.url }}">{{ child_link.title }}</a>
        </li>
      {% endfor %}
    </ul>
  </div>
{% endif %}

Then, add some CSS (in base.css) to style it:

.mega-menu {
  position: absolute;
  left: 0;
  top: 100%;
  background: white;
  display: none;
  padding: 20px;
  width: 100%;
}

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

[AbhishekK111]

Thank you so much for your help! I truly appreciate it, and I’m delighted to let you know that everything is working perfectly now.

[namphan]

Hi @AbhishekK111,

Can you describe in detail the steps of the error?

I will check it.