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?

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 Customization Geek | Helping fellow designers code the heck out of Squarespace

☞ Get the free Squarespace Coding Essentials guide to reach that next level of customization you're aiming for.

☞ Check out all the plugins & mini-courses and masterclasses available to help speed up your projects.

☞ Looking to outsource a customization or fix? I'd love to help you out. Get in touch!


Website | Youtube | Facebook | Pinterest

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.