Can You Change The Blog Layout Brine Template

The Squarespace Alkali family of templates are the most customizable templates on the Squarespace 7.0 platform including the Header navigation options. These are the template families I employ to use all the time for my custom website designs and one of the many reasons is the ability to customize the header surface area. Note: since Squarespace has introduced a new version I now start new websites on the 7.ane platform. Y'all can read almost the differences betwixt Squarespace seven.0 and Squarespace seven.one here .

Because there is so much design flexibility, many people get dislocated on how to set up these headers up. This mail service volition break that down today to testify you all the ins and outs of the Brine template header options.

Then what is a header area anyhow?

The header is the area that appears at the top of every website with navigation links that allow your site visitor to navigate around your site. The header area can have navigations links also as other information such as your social icon links, a shopping cart icon, a search bar and branding.

Brine template navigation areas

In that location are iii navigation areas on the Alkali family unit templates, the chief navigation, the secondary navigation and the footer navigation. We will look at the primary and secondary navigation options today hither.

Top and Bottom header areas

The Brine family templates have 2 header areas: the acme header and the bottom header. Within these 2 sections there are iii areas: left, center and right.

This is depicted by the this diagram of 6 quadrants: 3 across and two downwardly.

You can put multiple elements in each quadrant, but you lot have to be cautious with this as some elements tin overlap and looked squished. Typically it works best with only 2 quadrants in use per row equally well.

instance of a "squished navigation expanse

The other thing to annotation is when you accept lots of navigation links in 1 menu (ie Chief) so oftentimes what happens when viewers view it on a narrower device screen, the navigation spills over into 2 or three rows. This is peculiarly noticeable when the navigation is placed in the "center" area.

Here are some of the possible elements you can add within these quadrants:

Site championship or logo ("branding") - upload your logo or input your site title via the Pattern -> "Logo & Championship" option
Tag line - the option to command where the tag line can be shown will only evidence after you take entered a tag line in the Design -> "Logo & Championship" page
Navigation links - under the Pages panel create or elevate pages nether the Chief Navigation surface area and/or the Secondary navigation area
Congenital-in social icons - the social icon options will only show if you lot have ready your Social Accounts under Settings -> Social Links panel
Search bar
Shopping cart (for commerce plans)
Sign In / My Account link (for commerce plans)

To have these elements appear, open up upward the "Site Styles" console and underneath the "Header: Layout" area find these specific elements and change the default value from "hide" to the advisable area that you desire them to prove (ie peak right)

How do you brand navigation horizontal or stacked?

If y'all have more than i chemical element in a "quadrant" (ie. superlative eye) yous will have the option of whether yous would like to display them in a stacked(vertical) or in a horizontal view. Note that each element in this quadrant volition display this way based on your setting.

Bottom header

The bottom header displays page banners equally background images or videos. If at that place's no banner, the groundwork colour is the same every bit the page (Color in Main).

Hither is a guided walkthrough of how to set up upwardly your header area on the Brine family template with some examples of what you can do:

How do you fix a centered logo with navigation on either side? Spotter the video to learn:

Styling the Brine header on mobile devices

1 other affair I dear nearly the Brine family templates is the ability to mode the header surface area differently on mobile. There are options to change the logo size, logo position, the fonts etc.

You can besides strength the mobile navigation to come on at a certain pixel width if you are not happy with how your site looks on a slightly larger screen (such equally a tablet).

According to Squarespace - social icons and tag lines will not display on mobile. If yous add a search icon it will open an overlay search bar.

Watch the video below to see more about mobile styling on the Brine header:

How about some examples of different navigation areas on the Brine?

Here are some websites using one of the Alkali family templates that show the different options you lot can have forth with the settings from the Style panel (notation that some of these examples too use custom code to set the groundwork color of the lesser header area or add a border to the lesser header area).

Example of a Brine header on Squarespace with top navigtion

example of a navigation area using the Brine template on Squarespace

There you lot have it! If you demand a reason to switch to the Brine family templates on Squarespace then this just may be it! Just using the style editor settings allows yous and so much flexibility and so calculation in custom coding tin reach even more towards a very custom, unique header on Squarespace.

pin it for afterward