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

Store Design
, ,

Topic summary

A user sought to add dropdown arrows to navigation menu folders that invert when open, and to trigger menu folders on hover instead of click.

Solution provided:

  • Add CSS code to theme.css or base.css to enable hover functionality and arrow rotation
  • Insert JavaScript code in theme.liquid after the <body> tag
  • The CSS includes styling for .header__submenu, .icon-caret, and hover states with rotation transforms

Follow-up customization:
The user couldn’t initially see the dropdown icons. Additional CSS was provided to:

  • Change arrow color (fill property set to #898989)
  • Adjust arrow height to 7px
  • Position the arrow with right spacing of 1rem
  • Apply only on desktop viewports (min-width: 990px)

Outcome:
Both the hover functionality and visible, styled dropdown arrows were successfully implemented. The solution was marked as resolved.

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

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

2

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

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! :rocket: (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!

3

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?

4
  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:

websensepro_0-1749040625218.png
websensepro_0-1749040625218.png1148×103 3.43 KB

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! :rocket: (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!

1 Like
5

Hi, Many thanks. That worked really well.