Empty Drawer Mobile Menu

Solved

Empty Drawer Mobile Menu

Mikecomp
Visitor
1 0 0

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:

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="{{ 'component-search.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'component-cart-notification.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}">
<style>
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;
}
</style>
</head>
<body>
<!-- Header Section -->
<header class="header">
<div class="logo">
{% if settings.logo %}
<a href="{{ routes.root_url }}">
<img src="{{ settings.logo | image_url }}" alt="{{ settings.logo.alt | escape }}" style="max-height: 50px;">
</a>
{% else %}
<a href="{{ routes.root_url }}">{{ shop.name }}</a>
{% endif %}
</div>
<nav>
<ul class="menu desktop-menu">
{% for link in linklists['commercial-industrial-menu'].links %}
<li class="menu-item">
{% if link.links.size > 0 %}
<a href="{{ link.url }}" class="arrow">{{ link.title }}</a>
{% else %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
{% if link.links %}
<ul class="dropdown">
{% for sublink in link.links %}
<li class="menu-item">
<a href="{{ sublink.url }}">{{ sublink.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>

<!-- Hamburger Button for Mobile Menu -->
<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"
>
<i class="fas fa-bars icon-hamburger"></i>
</button>
</header>

<!-- Overlay -->
<div class="overlay" id="overlay" onclick="toggleDrawer()"></div>

<!-- Drawer Menu for Mobile -->
<div class="drawer" id="drawer">
<div class="drawer-header">
<button onclick="toggleDrawer()" style="background: none; border: none; font-size: 24px;">&times;</button>
<div class="logo" style="padding-left: 20px;">
{% if settings.logo %}
<a href="{{ routes.root_url }}">
<img
src="{{ settings.logo | image_url }}"
alt="{{ settings.logo.alt | escape }}"
style="max-height: 50px;"
>
</a>
{% else %}
<a href="{{ routes.root_url }}">{{ shop.name }}</a>
{% endif %}
</div>
</div>
<nav>
<ul class="menu mobile-menu">
{% for link in linklists['commercial-industrial-menu'].links %}
<li class="menu-item">
{% if link.links.size > 0 %}
<a href="{{ link.url }}" class="arrow">{{ link.title }}</a>
{% else %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
{% if link.links %}
<ul class="dropdown">
{% for sublink in link.links %}
<li class="menu-item">
<a href="{{ sublink.url }}">{{ sublink.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>

<script>
// Function to toggle the mobile drawer and overlay
function toggleDrawer() {
var drawer = document.getElementById('drawer');
var overlay = document.getElementById('overlay');
var toggleButton = document.querySelector('.js-mobile-nav-toggle');

if (drawer.classList.contains('open')) {
drawer.classList.remove('open');
overlay.classList.remove('open');
toggleButton.setAttribute('aria-expanded', 'false');
} else {
drawer.classList.add('open');
overlay.classList.add('open');
toggleButton.setAttribute('aria-expanded', 'true');
}
}

// Event listener for the hamburger button
document.querySelector('.js-mobile-nav-toggle').addEventListener('click', function() {
toggleDrawer();
});
</script>
</body>
</html>

Accepted Solution (1)

PaulNewton
Shopify Partner
7450 656 1562

This is an accepted solution.

Hi @Mikecomp 👋 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.

 

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


View solution in original post

Reply 1 (1)

PaulNewton
Shopify Partner
7450 656 1562

This is an accepted solution.

Hi @Mikecomp 👋 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.

 

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org