Changing the background color of the bottom header on just one page in Brine

• 00
• 01
• 99

When it comes to navigation, sometimes one style doesn’t fit all of the pages on your design.

Most often than not, there’s that one page on the site you’re building that requires some tweaks to make it look the way you need it to.

One of the most common situations is when you’re working with the Brine template, and you’re using the bottom header.

You like the way the navigation overlaps nicely on the banner images.

But that means you have to settle for a “backgroundless” header in all of the non-banner pages.

Let’s take a look at what we can do about that!

A background color for the bottom header of ONE page

We’ll start out with the assumption that you want to continue using the bottom header you’ve set through the Style Editor, to keep it transparent over banner images, but that there’s this one page where you’d like to add some color.

It doesn’t matter if they’re index pages or regular pages, by the way!

Here I have my homepage:

And this is another page on my site with a colorless header background:

Let’s start by looking for what the container we want to apply the background color to is called.

Ok, so here we have a header element with two classes, .Header and .Header--bottom.

Since the header element is too generic and is used in other blocks inside Squarespace, we don’t want it as our selector.

It would affect all the other elements containing it as well! For example, it would affect the Summary Block set to carousel layout.

If we take a look through our Inspect Element tool, we’ll notice that the element holding the text you can add as the carousel’s title, is ALSO a header element:

So, if we were to use header as our way to target our nav, this would happen:

Not ideal.

Let’s go with the classes.

And I say classes, plural, because we’ll be using both of them. That means this is the selector we’ll be working with:

.Header.Header--bottom {
  
}

Let’s test out a random color first:

.Header.Header--bottom {
  background-color: #ebebeb;
}

Awesome!

Now, before we move on, I’ll be changing that grey color code for a bright blue (rgb(41, 175, 209) and then make some adjustments to the padding and vertical element spacing inside the Style Editor, because it looks a bit uneven right now.

Much better!

Ok, now let’s check our homepage.

As you can see, the background color was applied here too, but don’t fret, we can make sure the code applies to just one page!

What we need is to look for our page ID.

In my case, my “services” page ID is #collection-5d02a834b48976000190fa67, so I’ll just plop that into our previous code snippet to make it clear I only want it to apply for that page.

#collection-5d02a834b48976000190fa67 .Header.Header--bottom {
  background-color: rgb(41, 175, 209);
}

No changes happened here, it’s all good.

Now, let’s check the homepage again.

Awesome!

The header remains transparent over our banner.

Now, before you ask, yes! It IS possible to add the background color TO the header over the banner image and keep it transparent on the other page.

The process is EXACTLY the same, regardless of whether you’re working with an index page or not, you’ll need to find the page ID of your page and just drop it in the code.

For example, my homepage has a page ID of #collection-5d1c9c37463602000118c1f7, so if I now replace the one I was using (for the services page) with this one…

#collection-5d1c9c37463602000118c1f7 .Header.Header--bottom {
  background-color: rgb(41, 175, 209);
}

I now have a lovely background color over my banner image, and then for my services page…

…there’s no change!

Perfect.

So there you go, that’s how you can change the background color of the header of ONE page on your site without affecting the others.

Note: you can totally do this for the top header as well! Just make sure to use the corresponding classes for it in your code.

Until next time,

B.

---

Full code

/*BACKGROUND COLOR FOR THE BOTTOM HEADER OF ONE PAGE IN BRINE*/
#collection-5d1c9c37463602000118c1f7 .Header.Header--bottom {
  background-color: rgb(41, 175, 209);
}