Empty Drawer Mobile Menu

Technical Q&A
1

Hi,

I’m looking for some help with my custom mobile menu. I have a client looking to have a commercial & retail side of their website, which was simple enough to establish except for the menus. I have to make a custom menu for the commercial side, the only problem is that the mobile drawer is empty. I have been trying for quite a while, and cannot seem to make the links populate within the drawer. The button opens an overlay but none of the links are available. Any help would be greatly appreciated!

The code in question:

body { font-family: Arial, sans-serif; margin: 0; padding: 0; }

.header {
background-color: #333;
color: #fff;
padding: 10px 20px;
position: relative;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
}

.header a {
color: #fff;
text-decoration: none;
}

.header .logo {
display: flex;
align-items: center;
}

.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}

.menu-item {
position: relative;
}

.menu-item > a {
display: block;
padding: 15px 20px;
}

.dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
color: #333;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
list-style: none;
margin: 0;
padding: 0;
z-index: 2000;
min-width: 200px;
}

.dropdown a {
color: #333;
display: block;
padding: 10px 20px;
}

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

.dropdown .menu-item {
position: relative;
}

.dropdown .dropdown {
top: 0;
left: 100%;
}

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

.btn–link {
background: none;
border: none;
cursor: pointer;
color: white;
font-size: 24px;
display: none;
}

.site-header__icon {
display: none;
}

@media (max-width: 768px) {
.menu {
display: none;
}
.btn–link {
display: block;
}
.site-header__icon {
display: flex;
align-items: center;
}
}

.drawer {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 250px;
background-color: #fff;
color: #333;
z-index: 2000;
padding: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}

.drawer.open {
transform: translateX(0);
}

.drawer .menu {
flex-direction: column;
padding: 0;
list-style: none;
}

.drawer .menu-item > a {
padding: 10px 0;
color: #333;
}

.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1999;
}

.overlay.open {
display: block;
}

.menu-item a.arrow::after {
content: ‘→’;
padding-left: 10px;
font-size: 14px;
color: #fff;
}

{% if settings.logo %} {{ settings.logo.alt | escape }} {% else %} {{ shop.name }} {% endif %}
    {% for link in linklists['commercial-industrial-menu'].links %}
  • {% if link.links.size > 0 %} {{ link.title }} {% else %} {{ link.title }} {% endif %} {% if link.links %} {% endif %}
    • {% endfor %}

<button
type=“button”
class=“btn–link site-header__icon site-header__menu js-mobile-nav-toggle”
aria-controls=“drawer”
aria-expanded=“false”
aria-label=“Toggle navigation menu”


×
{% if settings.logo %} {{ settings.logo.alt | escape }} {% else %} {{ shop.name }} {% endif %}
    {% for link in linklists['commercial-industrial-menu'].links %}
  • {% if link.links.size > 0 %} {{ link.title }} {% else %} {{ link.title }} {% endif %} {% if link.links %} {% endif %}
    • {% endfor %}
2

Hi @Mikecomp :waving_hand: avoid posting walls of code , either use the code formatting or minimize the code to the bare minimum.

Without even reading all that make a minimal reproducible example ignore html and css.

https://stackoverflow.com/help/minimal-reproducible-example

just try to output the menu and it’s children one step at a time, do the integration AFTER it works.

{{ linklist[‘menu-name’] }} , {{ linklist[‘menu-name’] | json }} , {% for link in linklist[‘menu-name’] %} {{ link }} {% endfor %}

etc etc etc

Tip: Use a custom-liquid section or block to tinker in the editor itself instead of roundtripping in files.