How To Make an Arrow Next to Navigation Header Titles Stay Rotated When In The Dropdown Menu

I'm trying to create an arrow on my header that, when you hover over to select something, shows an arrow that rotates 180 degrees, and stays rotated until you leave the dropdown menu. The issue with my current code is that it rotates how I want when you hover over the navigation header title, but when you go to select something from the menu, it rotates back to its original position. Here is what I have currently. 

Is there a way to make it so the arrow stays rotated when I'm hovering over the entire dropdown menu section?

.header-nav-folder-title:after {   
content: '\F107'; 
font-family: FontAwesome;
display: inline-block;
padding-left: 4px;
  padding-right: 6px;
  padding-top: 3px;
transform:rotate(180deg)};


.header-nav-folder-title:hover::after{
  transform:rotate(0deg)};

The website is currently shareable with password, if you need access beyond the code, message me and I'll send it to you.

Thanks!

Hey @AJohnston2022!

You can achieve that by changing the hover mode "trigger".

Instead of having the arrow rotate when hovering over the title of the folder, you can make it rotate when you hover anywhere on the entire folder + dropdown container.

To do that, you'll need to modify the hover mode snippet, like so:

.header-nav-item--folder:hover .header-nav-folder-title::after{
  transform:rotate(0deg)
};

Hope that helps!

On 11/25/2022 at 2:55 PM, beatrizc said:

Hey @AJohnston2022!

You can achieve that by changing the hover mode "trigger".

Instead of having the arrow rotate when hovering over the title of the folder, you can make it rotate when you hover anywhere on the entire folder + dropdown container.

To do that, you'll need to modify the hover mode snippet, like so:

.header-nav-item--folder:hover .header-nav-folder-title::after{
  transform:rotate(0deg)
};

Hope that helps!

This worked! Thank you so much!