Jump to content

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

Go to solution Solved by Ziggy,

Recommended Posts

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:

image.png.7c956f7e6b68e37849c64bdf212b7200.png

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:

image.png.d4f382ce974c8f2ca482f1717dc699e5.png

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:

image.png.c33d959b7f9efa08918ebe466a1b1981.png

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

Edited by KhanhLy174
Link to comment

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;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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)

Link to comment
1 hour ago, KhanhLy174 said:

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

Add it after the previous.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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:

image.thumb.png.6864ee6e080357c3055abf00e20a423c.png

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.

image.thumb.png.daf0753ec52891e56d6025d595d5cee6.png

Thank you for the help.

Edited by KhanhLy174
Link to comment
  • Solution

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!! 😄

Link to comment
Just now, KhanhLy174 said:

This works! Thank you so much!! 😄

Fantastic, glad we got there in the end!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.