Mobile Drawer Menu to Open Downwards ( Nested)

Store Design

Topic summary

A user working with the Broadcast theme on Shopify wants to modify the mobile drawer menu to open downwards (vertically) instead of sliding horizontally.

Solutions Proposed:

Two developers offered similar approaches involving CSS and JavaScript modifications:

  • CSS changes: Setting the menu to position: absolute, positioning it below the header with top: 100%, and toggling visibility with a .open class
  • JavaScript modifications: Adding event listeners to toggle the menu’s open state when clicked, either in theme.js or directly in theme.liquid above the </body> tag

Both solutions included code snippets for vertical dropdown behavior and menu toggle functionality.

Current Status:

The discussion remains unresolved — the original poster reported that none of the suggested solutions worked. The issue may require theme-specific selector adjustments or deeper customization of the Broadcast theme’s drawer implementation.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
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