Sub-navigation text hover color disappears after you click on it

I used the following code to assign specific colors for the background and the text of the sub-navigation item I hover over:

 .header-nav-folder-item:hover {

  background: #0a3745;

  a {

   color: #ff8c1a;

  }

 } 
}

The result of the code is below:

As you can see when you hover over the text it is orange. But after I click on the item, it is no longer orange when I hover over it:

The same thing happens to all items under "Technology", but when I hover over items of other categories (not yet clicking it), the text is still orange:

But the same thing happens again if I click on it. If I click on any subnav item, all other subnav items of the same category won't have orange text anymore when hovering.

You can check the website to see for yourself: dolphin-robin-ywxj.squarespace.com. Password is Taniq2023

I'm not a coder, I self taught and googled all my codes to build this website. Any idea how I can fix it? I want all subnav texts whenever being hovered over to have the orange color #ff8c1a

You can try adding this for the active state, but it looks like you may have an extra ending curly bracket at the end which might be causing an issue.

.header-nav-folder-item .header-nav-folder-item--active {
  background: #0a3745;
  a {
    color: #ff8c1a;
  }
}

11 minutes ago, Ziggy said:

You can try adding this for the active state, but it looks like you may have an extra ending curly bracket at the end which might be causing an issue.

.header-nav-folder-item .header-nav-folder-item--active {
  background: #0a3745;
  a {
    color: #ff8c1a;
  }
}

I checked again and if I'm not mistaken the code was a part of the following code (which I forgot to copy the entire thing), that's why there is an extra bracket:
 

.header-nav .header-nav-item--folder .header-nav-folder-content {

 padding: 0;

 .header-nav-folder-item {

  padding: .4em 1em;

 }

 .header-nav-folder-item {

  background: #082732;
   
  a {

   color: #ffffff;

  }

 }

 .header-nav-folder-item:hover {

  background: #0a3745;

  a {

   color: #ff8c1a;

  }

 } 

}

I tried adding your code to the Custom CSS but it didn't work. Am I supposed to just add it in, or replace some code I added with your code? (sorry for my limited knowledge in coding)

1 hour ago, KhanhLy174 said:

just add it in, or replace some code I added with your code

Add it after the previous.

14 hours ago, Ziggy said:

Add it after the previous.

Thanks but it didn't work.

22 hours ago, Ziggy said:

Add it after the previous.

Hi, do you have any other suggestions since the previous code didn't work? Thank you.

I've tweaked your code, and it works correctly on my test website, can you try replacing your previous one with this:

.header-nav-folder-content {
  padding: 0;
}
.header-nav-folder-content {
  .header-nav-folder-item {
    background: #082732;
    padding: 0.4em 1em;
  }
  .header-nav-folder-item a {
    color: #ffffff;
  }
  .header-nav-folder-item:hover {
    background: #0a3745;
  }
  .header-nav-folder-item:hover a {
    color: #ff8c1a;
  }
} 

.header-nav-folder-item--active {
  background: #0a3745 !important;
}
.header-nav-folder-item--active  a {
    color: #ff8c1a !important;
}

16 hours ago, Ziggy said:

try replacing your previous one with this:

Hi,

I replaced it and, it still didn't do what I wanted it to do, which is to make the text orange whenever on hover. There was also some extra space on two sides of the drop down menu for some reason, which didn't look very nice to me. However, what I really liked about it is that the clicked item now has orange color. I will explain further below:

As you can see there is some extra space on two sides, plus the other items in the same category ("software" category) are still white when being hovered. In this case you can see "Rubber Design & Manufacturing Software is being hovered over and is white. When you hover over other items of other categories, for example Applications, they are orange as preferred, unless you click on one of them and they are white again. So there is an inconsistency going on between items of a category that has been clicked on, and other items in other categories.

But I really like that the chosen item, in this case "TaniqWind Design" now has an orange color. What I really wanted, was that other items when hovering also has orange color. So I tested by keeping my old code, and adding parts of your new code:
 

.header-nav .header-nav-item--folder .header-nav-folder-content {
 padding: 0;
 .header-nav-folder-item {
  padding: .4em 1em;
 }
 .header-nav-folder-item {
  background: #082732;
  a {
   color: #ffffff;
  }
 }
 .header-nav-folder-item:hover {
  background: #0a3745;
  a {
   color: #ff8c1a;
  }
 } 
}
.header-nav-folder-item--active {
  background: #0a3745 !important;
}
.header-nav-folder-item--active  a {
    color: #ff8c1a !important;
}

This code keeps the old look (without extra space on two sides of the drop down menu), and adds the orange color on clicked item. The only thing I need now is the hovered items in the same category to be orange as well. I think we are almost there :D.

Thank you for the help.

6 minutes ago, Ziggy said:

Try adding this:

.header-nav-wrapper .header-nav-item--active a:hover {
  color: #ff8c1a !important;
}

If that still doesn't work, then you must have a code conflict somewhere in your Custom CSS that is overriding it as the code I've adjusted works perfectly on a "clean" website.

This works! Thank you so much!! 😄

Just now, KhanhLy174 said:

This works! Thank you so much!! 😄

Fantastic, glad we got there in the end!