Mobile Drawer Menu to Open Downwards ( Nested)

[TBS2023]

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

[Dotsquares]

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 */
}

2) 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.

[rajweb]

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 </body> tag

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

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const menuButton = document.querySelector("[data-menu-button]"); // Adjust selector if needed
    const menuDrawer = document.querySelector("[data-menu-drawer]"); // Adjust selector if needed

    if (menuButton && menuDrawer) {
      // Hide menu initially
      menuDrawer.style.display = "none";

      menuButton.addEventListener("click", function (event) {
        event.preventDefault();
        if (menuDrawer.style.display === "none") {
          menuDrawer.style.display = "block"; // Show menu
          menuDrawer.style.opacity = "1";
        } else {
          menuDrawer.style.display = "none"; // Hide menu
        }
      });
    }
  });
</script>

<style>
  [data-menu-drawer] {
    position: absolute !important;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-in-out;
  }
</style>

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

Thanks & Best,
Rajat

[TBS2023]

none of these works unfortunately