Multi-level Mega menu on Debut Theme

Highlighted
Shopify Partner
7 0 0

Hello folks !

I'll put it simple, i've 3 level on the mega menu and the 3rd level display always for no reason (i dont hover or clic on the sub-menu that should display that 3r sub-menu)

Here is my site-nav.liquid

<ul class="site-nav list--inline {{ nav_alignment }}" id="SiteNav">

{% for link in linklists[section.settings.main_linklist].links %}
{%- assign child_list_handle = link.title | handleize -%}

{% if linklists[child_list_handle].links != blank %}
<li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}">
<a href="{{ link.url }}" class="site-nav__link site-nav__link--main" aria-has-popup="true" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
{{ link.title }}
{% include 'icon-chevron-down' %}
<span class="visually-hidden">{{ 'layout.navigation.expand' | t }}</span>
</a>

<div class="site-nav__dropdown" id="SiteNavLabel-{{ child_list_handle }}">
<ul >
{% for childlink in linklists[child_list_handle].links %}
<li class="site-nav--has-dropdown{% if childlink.active %}site-nav--active{% endif %}">
<a href="{{ childlink.url }}" class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}">{{ childlink.title | escape }}</a>

{%- assign child_list_handle1 = childlink.title | handleize -%}
{% if linklists[child_list_handle1].links != blank %}
<div class="site-nav__dropdown" id="SiteNavLabel-{{ child_list_handle1 }}">
<ul>
{% for childlink1 in linklists[child_list_handle1].links %}
<li {% if childlink1.active %}class="site-nav--active"{% endif %}>
<a href="{{ childlink1.url }}" class="site-nav__link site-nav__link--main" aria-has-popup="true" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle1 }}">
{{ childlink1.title }}
</a>
</li>
{% endfor %}
</ul>
</div>

{% endif %}
</li>
{% endfor %}

</ul>
</div>
</li>
{% else %}
<li {% if link.active %}class="site-nav--active"{% endif %}>
<a href="{{ link.url }}" class="site-nav__link site-nav__link--main">{{ link.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>

0 Likes
Highlighted
Excursionist
22 2 8
Hey there!

What is the CSS corresponding with the menu? Or, if you can provide a link I can help you out in diagnosing!
0 Likes
Highlighted
Shopify Partner
7 0 0
/*================ HEADER css ================*/
 
header.site-header a:hover {
  color: #FFA081;
  text-decoration: none;
}
 
.site-nav–has-dropdown{
position: static;
}
 
.site-nav{
position: relative;
}
 
.site-nav–active-dropdown .site-nav__dropdown{
width: 100%;
ul{
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
}
 
.site-nav--has-dropdown:hover .site-nav__dropdown,
.site-nav--has-dropdown:focus .site-nav__dropdown {
 display: block;
}
 
.site-nav__dropdown { top: 30px; }
.site-nav li { position: relative; }
 
/*================ MEGAMENU TEST css ================*/
 
.site-nav__dropdown li {
    display: block;
    min-width: 200px;
    padding: 0px 10px;
}
.site-nav__dropdown .site-nav__dropdown {
    left: 199px;
    top: -30px;
}
.site-nav__dropdown {  
    padding: 10px 0;
    }
    
    .site-nav__dropdown .site-nav__dropdown {
    left: 199px;
    top: -30px;
}
 
.site-nav--has-dropdown .site-nav--has-dropdown:hover > .site-nav__dropdown {
    top: -11px;
}
site-nav__dropdown .site-nav__link {
     font-size: 14px;
}
 
 
 
@media(max-width:750px){
 .mobile-nav__sublist-link:not(.mobile-nav__sublist-header) {
    padding-left: 23px;
}
ul > li > ul > li.mobile-nav__item {
    padding-left: 15px;
}
 
}
0 Likes
Highlighted
Excursionist
22 2 8

Hi there!

 

This should work for you, let me know if you have any questions!


<ul class="site-nav list--inline {{ nav_alignment }}" id="SiteNav">

{% for link in linklists[section.settings.main_linklist].links %}
{%- assign child_list_handle = link.title | handleize -%}

{% if linklists[child_list_handle].links != blank %}
<li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}">
<a href="{{ link.url }}" class="site-nav__link site-nav__link--main" aria-has-popup="true" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
{{ link.title }}
{% include 'icon-chevron-down' %}
<span class="visually-hidden">{{ 'layout.navigation.expand' | t }}</span>
</a>

<div class="site-nav__dropdown" id="SiteNavLabel-{{ child_list_handle }}">
<ul>
{% for childlink in linklists[child_list_handle].links %}
<li class="site-nav--has-dropdown{% if childlink.active %}site-nav--active{% endif %}">
<a href="{{ childlink.url }}" class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}">{{ childlink.title | escape }}</a>

{%- assign child_list_handle1 = childlink.title | handleize -%}
{% if linklists[child_list_handle1].links != blank %}
<div class="site-nav__dropdown" id="SiteNavLabel-{{ child_list_handle1 }}">
<ul>
{% for childlink1 in linklists[child_list_handle1].links %}
<li {% if childlink1.active %}class="site-nav--active"{% endif %}>
<a href="{{ childlink1.url }}" class="site-nav__link site-nav__link--main" aria-has-popup="true" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle1 }}">
{{ childlink1.title }}
</a>
</li>
{% endfor %}
</ul>
</div>

{% endif %}
</li>
{% endfor %}

</ul>
</div>
</li>
{% else %}
<li {% if link.active %}class="site-nav--active"{% endif %}>
<a href="{{ link.url }}" class="site-nav__link site-nav__link--main">{{ link.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>

<style>
header.site-header a:hover {
color: #FFA081;
text-decoration: none;
}

.site-nav--has-dropdown{
position: static;
}

.site-nav{
position: relative;
}

.site-nav--active .site-nav__dropdown{
width: 100%;
ul{
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
}

.site-nav--has-dropdown:hover .site-nav__dropdown,
.site-nav--has-dropdown:focus .site-nav__dropdown {
display: block;
}

.site-nav__dropdown { top: 30px; }
.site-nav li { position: relative; }

/*================ MEGAMENU TEST css ================*/

.site-nav__dropdown li {
display: block;
min-width: 200px;
padding: 0px 10px;
}

.site-nav__dropdown .site-nav__dropdown {
left: 199px;
top: -30px;
}
.site-nav__dropdown {
padding: 10px 0;
}

.site-nav__dropdown .site-nav__dropdown {
left: 199px;
top: -30px;
}

.site-nav--has-dropdown .site-nav--has-dropdown:hover > .site-nav__dropdown {
top: -11px;
}
.site-nav__dropdown .site-nav__link {
font-size: 14px;
}
li.site-nav--has-dropdown .site-nav__dropdown > li.site-nav__dropdown {
display: none !important;
}
li.site-nav--has-dropdown:hover > .site-nav__dropdown {
display: block;
}

li.site-nav--has-dropdown .site-nav__dropdown .site-nav--has-dropdown .site-nav__dropdown{
display: none !important;
}
li.site-nav--has-dropdown .site-nav__dropdown .site-nav--has-dropdown:hover .site-nav__dropdown{
display: block !important;
position: absolute;
}
@media(max-width:750px){
.mobile-nav__sublist-link:not(.mobile-nav__sublist-header) {
padding-left: 23px;
}
ul > li > ul > li.mobile-nav__item {
padding-left: 15px;
}

}
</style>

Highlighted
Excursionist
22 2 8

Did this work out for you? If so, please mark as solved ! <3 

Highlighted

This works for me! Is there a way to add a marker (like an arrow or "chevron") next to the menu items that contain additional dropdown menus (like there is with the top level menu items)? 

0 Likes
Highlighted
Excursionist
22 2 8
Yep! Send me your website link and I'll take a look for you! Hello@tlk.digital
Highlighted

Unfortunately, I can't. Working on a theme that's not live. But, I think I figured out where it goes... just not how to get the fancy CSS down arrow icon to go there. Seems to go after this... 

 

<div class="site-nav__dropdown" id="SiteNavLabel-{{ child_list_handle1 }}" //marker goes here
0 Likes
Highlighted
New Member
1 0 0

Hi Jen-10 your code works perfectly on every pages except when we are on a collection page.

 

Home page: works

Product page: works

Contact page: works

...etc

Collection page: doesn't work!

 

Can you help please?

Thank you.

0 Likes
Highlighted
Excursionist
11 0 4

It worked on desktop view. how to implement this on mobile view? Thank you.

0 Likes