How to place the Tagline below the Site Title

22 Jun

This is one of those weird things that affects Brine family templates. If you set the Branding Position and the Tagline Position to Top Center you would expect the tagline to appear below the branding (site title or logo) but it doesn't! Instead, it appears like this:

If this is affecting your site, you can fix it by adding some styles using CSS. Go to Design > Custom CSS and add the following:

  
    /* Place tagline below branding */
/* When in top-center position */
/* for Brine family templates */
/* You may use freely on Squarespace but do not publish */
/* Copyright Soundfocus Digital [www.sf.digital]        */
[data-nc-base="header"] [data-nc-container="top-center"] {
  flex-direction: column;  
}
[data-nc-base="header"] [data-nc-container="top-center"] [data-nc-element="tagline"] {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
  /* Adjust for distance from title */
  margin-top: -17px;
}
  
  

Don’t forget to save the changes. It should now look like this. The last line of the CSS can be adjusted (or removed altogether) to decide the spacing between the branding and the tagline.