Jump to content

How to change subnav dropdown field color on blog post page only?

Go to solution Solved by beatrizc,

Recommended Posts

The first image below shows the default colors for the site header.
 
The blog post page uses a color style that switches the background of the page and header to white. With custom code (second image), I have changed the blog page header background to black so that the logo shows up. Then, I added code so the nav text is white. 

How do I change the drop down nav background to black so that the white subnav shows up?

Ideas?
Thank you.

p.s. The site is private at the moment, so the url will not work....

 

Default header:

Screenshot 2023-03-25 at 8.42.56 AM.png

 

Blog post page header (modified)

Screenshot 2023-03-25 at 8.42.39 AM.png

Link to comment
  • Solution

Hey @cinstudio!

You can use the following snippet to change that folder bg color if you're in Brine, 7.0:

.Header-nav-folder {
  background-color: black !important;
}

Or this other one if you're in 7.1:

.header-nav-folder-content {
  background-color: black !important;
}

 

Assuming that you'll be applying this only for the blog page – if you're adding the code to the Custom CSS window – you can include the page ID in the snippet if you need to, like this:

#page-id-goes-here .header-nav-folder-content {
  background-color: black !important;
}

(Same thing for 7.0, but with the corresponding selector from before).

 

Hope this helps!

Squarespace Coding Expert | Coding the heck out of Squarespace, one wtf at a time.

☞ Search through The Codebase to learn new CSS tricks and awesome customizations.

☞ Get +150 mini-plugins ready to copy-paste to fix or tweak your Squarespace site.

☞ Got a rare, medium rare or fully cooked idea for your client's project? Let's make it a reality.

 

Website | Youtube

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.