Create a Bedford Style Highlighted Nav in Brine

Making your Brine/Wright Squarespace Template look like a Bedford Template Header

One of the things that many of my clients ask for is more information about why they are choosing one template over another. Many of the time it comes down to explaining that many of the small details they are hung-up on in their current template are totally adaptable to a newer template that has more custom options without the code. Once that is explained they do like this idea. You do have to be pretty comfortable with the templates, and confident in your presentation to the client.

Here's an example of one thing a client recently got hung up on, and showing how there is a REALLY simple addition that allows us to do the same thing.


Step One: The Setup

The first thing we are going to do is get your site read for this. We are using the Brine template (just a reminder: this also includes a ton of different templates:

AriaBasilBurkeCacaoClayEthanFairfieldFeedFosterGreenwichHatchHeightsHunterHydeJauntJukeKeeneMapleMargotMartaMentorMercerMillerMokshaMottoMojaveNuevaPolarisRallyRoverSofiaSonnySonoraThorneWav, and West.

1. Set the Logo to the LEFT (top or bottom is fine) - just make it the same as the next step.

2. Next we are setting the Primary Navigation to the RIGHT (same as Logo -- either top or bottom).

3. Now we are going to add in some css in the global css section // design > custom css > paste the code below. Learn a bit more about the css below. 


This is the exact code that we are using in the above example.

.Header-nav--primary .Header-nav-item:last-child {
    color: white !important;
    background-color: rgb(168, 183, 184) !important;
    padding: .6em 1em !important;
    opacity: .8

.Header-nav--primary .Header-nav-item:last-child:hover {
    background-color:  rgb(78, 95, 121) !important;    

But what does this mean? 

Let's dig into it a little bit for those new to css. What we are saying is that "header-nav--primary" is our Primary Navigation section. Then we are saying "header-nav-item" which then specifies that we are targeting each of the items within the primary navigation. Pushing that even further, we are defining the "last-child" meaning the last one in the grouping. In this case it's the one on the far right- same as the bedford template.

The next section of css is the hover-status of that last item in the primary navigation. This allows the content to look like a button, rather than just a block of color. You want the second part for the hover status to ONLY be the changes you want applied, so it's not extra code.

Now let's break down the values of the css so you can edit yourself.

color: white

This  is the color of the text. So if you want black text just change "white" to "black" or use my favorite hex color of black being a slightly charcoal black #373737 ---> just remember if you want to use a hex color don't for get your #.

background-color: rgb

This is an alternate way of showing color on web. In this case it might be a copy/paste from your color chooser on the design style editor window, but a hex color or any other web color works.

padding: north-south  East-west

The padding is going to determine how BIG your button is. In this example we are using a north-south padding of .6em and a left-right or east-west padding of 1em. Just remember it's North-South first, then East-West second.


In this case, sometimes you want to add in a bit of Opacity into the mix. Sometimes a color looks different as a text color than a solid block, so adding in a line of opacity takes it down to 80% of the solid color.

I hope this helps people solve their client wants Bedford and you want Brine woes!