Mega menu disappears on hover

[HS6]

i’ve added a mega menu with hover effect in my dawn theme, but before i can select the menu items it disappears. can someone help fix that?

site link

PW : fixcheck

i’ve already finished google on the subject but couldn’t find a suitable solution.

[CodingFifty]

Hi @HS6 ,

Go to Online Store, then Theme, and select Edit Code.
Search for header.liquid file Add the provided code at the end of the file.

[HS6]

HI i’ve done as you said, but there is no effect. pasted the code here in header.liquid

[CodingFifty]

Hi @HS6 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.mega-menu[open] .mega-menu__content {
    opacity: 1;
    transform: translateY(0);
    margin-top: -31px !important;
    z-index: 99999999 !important;
}

[HS6]

Great this works perfect! Thank you so much, as i’ve been spending hours already

could i perhaps ask you also another question? Do you know how i can make the main menu items clickable? If i click on them now, the mega menu dissapears instead of opening the link.

[CodingFifty]

Hi @HS6 ,

You can do that by following this.

Go to your Online store > Themes > Edit code > open header-dropdown-menu.liquid and header-mega-menu.liquid files, find those lines of code (from line 19th-25th)

                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>
                {% render

Change to this and save the file

                <a class="header__menu-item list-menu__item link link--text focus-inset" href="{{ link.url }}">
                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>
              </a>

[HS6]

Thanks for the input. i’ve tried but this doens’t work yet. i do see that the code in header-mega-menu.liquid is diffent than you wrote

there is no

{% render