How to add dropdown arrows to nav menu folders and trigger on hover?

atmos-art · ‎06-04-2025

Hi,

I was wondering how to add a dropdown arrow to my navigation menu folders which inverts when the folder is open?

I would also like my nav menu folders to open on hover rather than on click, which is how it is set at the moment.

URL: www.atmos.art

websensepro · ‎06-04-2025

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media (min-width:990px) {
svg.icon.icon-caret path {
    fill: #898989 !important;
}
svg.icon.icon-caret {
height:7px !important;
}
.header__menu-item .icon-caret {
    right: 1rem !important; 
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

View solution in original post

websensepro · ‎06-04-2025

Hi @atmos-art
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.header__submenu {
  display: none;
  position: absolute;
  z-index: 10;
  transition: all 0.3s ease;
}
header-menu:hover .header__submenu {
  display: block;
}
header-menu:hover .icon-caret,
details[open] .icon-caret {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.icon-caret {
  display: inline-block;
  transition: transform 0.3s ease;
  vertical-align: middle;
}

.header__menu-item {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px; /* Space between text and arrow */
}
.header__submenu {
  background: #fff; /* Adjust based on your theme */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-radius: 4px;
}

header-menu {
  position: relative;
}

and then open your theme.liquid file and paste the below code after <body>

<script>
document.querySelectorAll('header-menu details').forEach(details => {
  const summary = details.querySelector('summary');


  summary.addEventListener('click', (e) => {
    e.preventDefault(); 
  });


  details.addEventListener('mouseenter', () => {
    details.setAttribute('open', '');
  });


  details.addEventListener('mouseleave', () => {
    details.removeAttribute('open');
  });
});
</script>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

atmos-art · ‎06-04-2025

Hi, this worked great for the hover part. However, I can’t see the icon next to the folders if this added them. How can I change the colour of them?

websensepro · ‎06-04-2025

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media (min-width:990px) {
svg.icon.icon-caret path {
    fill: #898989 !important;
}
svg.icon.icon-caret {
height:7px !important;
}
.header__menu-item .icon-caret {
    right: 1rem !important; 
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

atmos-art · ‎06-04-2025

Hi, Many thanks. That worked really well.

How to add dropdown arrows to nav menu folders and trigger on hover?

How to add dropdown arrows to nav menu folders and trigger on hover?

Community Blog Articles