Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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;">×</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>
Solved! Go to the solution
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
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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024