How to create an overlapping logo in Brine (7.0)

• 00
• 01
• 02
• 99

Either because your logo is quite tall or simply because you want to make your header look different, you want to make your logo appear half on the navigation bar and half over your banner image/page.

Cool, let’s do it then!

Today we’ll be looking at how you can easily overlap your logo on your Squarespace site, using one of the Brine templates.

Preparing your navigation bar

The first thing we need to do is set up our header layout in a way that allows us to easily achieve this as easily as possible.

We’re going to be placing our menu links and other elements – like social media icons and search bar – on the top navigation.

And we’re going to place our logo on the bottom navigation.

Overlapping your logo in Brine

Alright now let’s take a look at how we can target the container holding our logo, so we can reposition it.

Zooming into our Inspect Element window…

We can see that the container holding our logo doesn’t have an ID nor a class.

However, it does have a pretty specific attribute and value since it’s indicating the position we chose through the Style Editor.

Therefore, we’re going to be targeting it through that attribute.

The way to do this is to simply copy the entire attribute + value – in this case data-nc-container="bottom-center" – and adding that to our Custom CSS window in between square brackets to indicate we’re talking about an attribute selector.

[data-nc-container="bottom-center"] {

}

When using these types of selector, we can also add the type of element that has it.

In this case is just a div, so we can place the div selector right in front of the attribute selector (no spaces since it belongs to the same element)

div[data-nc-container="bottom-center"] {

}

Ok cool, now I don’t think there will be another element with those specifications around our page, but just to be sure we can make sure to target the one inside our header only.

Thus, we need to look for the class of our navigation container.

The first parent of our bottom-center container has some header classes so we can use one of them.

In our Custom CSS window we can now add .Header-inner to our selector to finish building it:

.Header-inner div[data-nc-container="bottom-center"] {

}

Perfect, we’re ready to reposition it!

All we have to do is give it a position and set a negative top offset to pull it higher up.

.Header-inner div[data-nc-container="bottom-center"] {
  position: relative;
  top: -80px;
}

That’s it! It looks great both over banner images like shown above, and on regular pages like below!

Awesome! Now you know how to overlap a logo in your Brine template!

Until next time,

B.

---

Full code

.Header-inner div[data-nc-container="bottom-center"] {
  position: relative;
  top: -80px;
}