Impluse theme - mobile menu, default expanded view

Store Design
,
1

I am interested in having one of my categories defaulted to the expanded view upon opening the menu on mobile. In the attached example, I would like “Shop” and “Steaks” expanded default. Thanks in advance!

impluse menu example.png
impluse menu example.png2805×2607 454 KB

2

Hello there

To default a category to the expanded view upon opening the menu on mobile in your Shopify store, you can use a bit of JavaScript to add a CSS class to the menu item.

Here’s an example of how you can achieve this:

  1. In your Shopify theme editor, navigate to the “Assets” folder and open the “theme.js” or “theme.js.liquid” file.

  2. Add the following code at the end of the file:

// Default expanded categories on mobile
if (window.innerWidth < 768) { // adjust this breakpoint to match your theme's mobile breakpoint
  var defaultCategories = ['Shop', 'Steaks']; // replace with the names of your desired default categories
  var menuItems = document.querySelectorAll('.site-nav__item');
  menuItems.forEach(function(item) {
    if (defaultCategories.includes(item.innerText.trim())) {
      item.classList.add('expanded');
    }
  });
}

Note that you should replace the “Shop” and “Steaks” categories in the code with the names of your desired default categories.

Save the changes to the “theme.js” or “theme.js.liquid” file and refresh your website to see the changes.