Mobile Drawer Menu to Open Downwards ( Nested)

Store Design
1

Hello

I am using the Broadcast Theme

www.thebodyshop.ca

datsau

I would like the mobile menu ( drawer) to open downwards one click and not horizontally

Thanks

2

Hi @TBS2023 you’ll need to modify the theme’s CSS and JavaScript to change the menu behavior.

  1. Adjust CSS for Vertical Dropdown

.mobile-menu {
position: absolute !important;
top: 100%; /* Pushes the menu below the header /
left: 0;
width: 100%;
display: none; / Hides the menu initially /
background-color: #fff; / Adjust as per theme */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.mobile-menu.open {
display: block !important; /* Show menu when active */
}

  1. Try adding this script at the bottom of theme.js:

document.addEventListener(“DOMContentLoaded”, function () {
const menuToggle = document.querySelector(“.menu-toggle”);
const mobileMenu = document.querySelector(“.mobile-menu”);

if (menuToggle && mobileMenu) {
menuToggle.addEventListener(“click”, function (event) {
event.preventDefault();
mobileMenu.classList.toggle(“open”);
});
}
});

Let me know if these work for you.

3

Hey @TBS2023 ,

To make the mobile menu open downwards instead of sliding horizontally in the Broadcast theme, you’ll need to modify the theme’s JavaScript and CSS.

Follow these steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag

This script overrides the default drawer behavior to slide down instead of opening horizontally:

Would you like help adjusting the selectors to match your theme? Please feel free to reach out below.

Thanks & Best,
Rajat

4

none of these works unfortunately