Mobile menu to drop downwards

[TBS2023]

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

[Small_Task_Help]

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;
}