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

Store Design
1

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?

like this
like this1425×618 73.8 KB

2

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 %}
  
    

      {% for child_link in link.links %}
        - {{ child_link.title }}
        
      {% endfor %}
    

  

{% 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;
}
3

Hi @AbhishekK111 ,

Can you describe in detail the steps of the error?

I will check it.

4

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.