Mobile menu to drop downwards

Store Design

Topic summary

A user wants to modify their mobile menu in the Broadcast theme to open downward instead of sliding in from the side, aiming to reduce the number of clicks required for navigation.

Proposed Solution:

  • Edit header.liquid or mobile-menu.liquid to modify the menu button behavior
  • Implement JavaScript to toggle menu visibility with a dropdown effect
  • Apply CSS styling to position the menu absolutely below the toggle, with appropriate styling (shadow, z-index, full width)

Status: A community member provided code snippets for JavaScript toggle functionality and CSS styling. The discussion remains open as implementation and testing have not been confirmed.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello

I would like my Mobile Menu to open downwards and not to the side ( as this means too many clicks)

I am using the Broadcast Theme

www.thebodyshop.ca

datsau

2

Hi,

Hope this will help

  • Edit header.liquid or mobile-menu.liquid to change menu button.
  • Add JavaScript to show/hide menu as a dropdown.
    JavaScript example
function toggleDropdownMenu() {
    let menu = document.querySelector(".mobile-menu");
    if (menu.style.display === "block") {
        menu.style.display = "none"; // Hide menu when clicked again
    } else {
        menu.style.display = "block"; // Show menu as dropdown
    }
}
  • Use CSS to style the dropdown effect.

CSS example

.mobile-menu {
    display: none; /* Hidden by default */
    position: absolute;
    width: 100%;
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.mobile-menu-toggle {
    cursor: pointer;
}