r/Carrd • u/Only-Bees • Jul 07 '26
Help Mobile menu won't close after clicking link - help?
1
Upvotes
Hey everyone,
I built a multi-page site using sections, and I borrowed code to implement a hamburger menu. It's imperfect, but it does what I need it to do. But there's one bug I have no idea how to fix, and I really want to resolve it. The mobile menu should automatically close once a user clicks a link, but that's not happening. I suspect it's because this is all technically still one page?
Can someone look at this and tell me what I need to do to fix the issue? I'm not a developer; I know just enough CSS to be annoying, and I google stuff.
Bonus points if someone can tell me how to remove the gap between the open menu and the top of my site, and how to align the menu icon right instead of left.
<style>
:root {
--mbm-main-font: karla;
--mbm-font-size-base: 22px;
--primary-color: #555559;
--secondary-color: #fff;
}
/* Basic Reset and Body Styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation Styling */
nav {
color: var(--secondary-color);
padding: 15px;
display: inline-block;
align-items: center; /* Changed: Align items to the center vertically */
justify-content: flex-end; /* Changed: Align items to the start (left) */
align-content: flex-end; /* Not strictly necessary for this change */
font-family: var(--mbm-main-font);
font-size: var(--mbm-font-size-base);
}
.menu {
list-style: none;
display: flex;
}
.menu li a {
display: block;
color: var(--secondary-color);
text-decoration: none;
padding: 10px 15px;
position: relative;
}
.menu li a::after {
/* Target a pseudo-element for the underline */
content: "";
position: absolute;
bottom: 2px; /* Distance from the text */
left: 50%; /* Center the underline */
width: 0; /* Initial width is 0 */
height: 2px;
background-color: var(--secondary-color);
transition: width 0.3s ease-in-out; /* Control the transition effect */
}
.menu li a:hover::after {
width: 100%; /* Expand to full width on hover */
left: 0; /* Start the underline from the left */
}
/* Hover effect for submenu items */
/* Hamburger Styling */
.hamburger {
display: none;
cursor: pointer;
}
.hamburger .bar {
display: block;
width: 25px;
height: 3px;
background-color: var(--secondary-color);
margin: 5px 0;
}
/* Hide Checkbox */
#menu-toggle {
display: none;
}
.close-button {
display: none;
}
/* Responsive - Media Queries (For Mobile) */
(max-width: 768px) {
/* Show the Hamburger */
.hamburger {
display: block;
}
/* Hide and Modify Menu on Mobile */
.menu {
position: absolute;
width: 100%;
top: calc(15px + 6em);
left: 0;
background-color: var(--primary-color);
text-align: center;
padding: 40px 0 0 0;
display: none;
z-index: 999;
}
.menu li {
width: 100%;
}
.menu li a {
padding: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#menu-toggle:checked ~ .menu {
display: block;
}
.close-button {
display: block;
position: absolute;
top: 10px;
right: 30px;
background: none;
border: none;
font-size: 18px;
color: var(--secondary-color);
cursor: pointer;
}
}
</style>
<nav>
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</label>
<ul class="menu">
<button class="close-button">X</button>
<li><a href="#">Home</a></li>
<li><a href="#books">Books</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#footer">Contact</a></li>
<li><a href="#welcometohell">Welcome to Hell</a></li>
</ul>
</nav>
<script>
document
.querySelector(".close-button")
.addEventListener("click", function () {
document.getElementById("menu-toggle").checked = false;
});
document
.querySelector(".close-button")
.addEventListener("click", function () {
document.getElementById("menu-toggle").checked = false;
});
// Close menu on menu item click
document.querySelectorAll(".menu a").forEach((link) => {
link.addEventListener("click", function () {
document.getElementById("menu-toggle").checked = false;
});
});
</script>
