Brine: How to place the Tagline below the Branding (Site Logo/Site Title)

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:

branding-without-css.png

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 */
[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.

branding-with-css.png
SF Digital