Jump to content

Remove background colour from nav dropdown menu (folder)

Go to solution Solved by Ziggy,

Recommended Posts

  • Solution

Add this to Custom CSS:

body:not(.header--menu-open) [data-header-style="solid"].header .header-nav-folder-content, body:not(.header--menu-open) [data-header-style="solid"].header .language-picker-content {
    background-color: rgba(255, 255, 255, 0);
}

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
19 minutes ago, lisanemetz said:

Any chance you could help me add an underline when hovering over any of the menu items (including the dropdowns) as well? Thanks so much!

Sure! Try this CSS:

.header .header-nav-wrapper a:hover, .header .language-item a:hover {
  text-decoration:underline;
}

 

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

Thank you! Is there a way to make the underline match the default underline for the selected page? At the moment it shows both and they're different weights and positions.

Thanks for your help!

 

Screenshot 2024-07-01 at 13.45.33.png

Link to comment
2 hours ago, lisanemetz said:

Thank you! Is there a way to make the underline match the default underline for the selected page? At the moment it shows both and they're different weights and positions.

Try this:

body:not(.header--menu-open) .header-nav-item--active>a {
  background:none !important;
  text-decoration:underline;
}

 

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
54 minutes ago, lisanemetz said:

Thank you! Unfortunately it's still the the same - maybe I pasted it in the wrong place?

Try this instead:

body:not(.header--menu-open) .header-nav-item--active>a {
  background-image:none !important;
  text-decoration:underline;
}

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
7 minutes ago, IndusSociety said:

Hello hello! @Ziggy I have entered the CSS code you mentioned earlier in the thread but it doesn't work. I am trying to remove the black background in the navigation bar and have the sub-menus show as underlined (no background color). Please help! Thank you so much. 

Try this adjustment for your website:

:not(.header--menu-open) .header-nav-folder-content, :not(.header--menu-open) .language-picker-content {
    background-color: rgba(0,0,0,0);
}

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

@Ziggy you are the best! That worked. I was hoping that when you hover over a menu page, it will have an  underline so you can see what you are clicking on. Right now, it is only transparent (which is beautiful). I hope that makes sense 🙂  

Screenshot2024-07-01154031.thumb.png.a2f1dea054bb431bb0eced02019c8dcb.png

Link to comment
On 7/1/2024 at 6:23 PM, Ziggy said:

Try this instead:

body:not(.header--menu-open) .header-nav-item--active>a {
  background-image:none !important;
  text-decoration:underline;
}

Thank you @Ziggy - unfortunately it hasn't changed. it works for the main menu item, but not for the dropdowns, they still have the double underline. Any alternative options? Thanks so much!

Link to comment
On 7/1/2024 at 3:42 PM, IndusSociety said:

@Ziggy you are the best! That worked. I was hoping that when you hover over a menu page, it will have an underline so you can see what you are clicking on. Right now, it is only transparent (which is beautiful). I hope that makes sense 🙂  

Screenshot2024-07-01154031.thumb.png.a2f1dea054bb431bb0eced02019c8dcb.png

@Ziggy I hope everything is well on your end! Apologies for bugging you, is it possible to edit the code so the pages become underlined when you hover over/click on them?  

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.