Jump to content

Custom Aligning/Ordering Header items

Recommended Posts


pw: jonjonjon


Template: Brine


I'm trying to create a combination of Site-Title, Tagline & Social Icon.

Line 1: Site Title

Line 2: Social Icon + TagLine

All aligned top left.



I'm new to CSS, and have only suspicions about how to go about this. I've managed to get the layout I'm after, but without being able to get the social Icon and Tagline to be on the same line. I suspect this is to do with the flex styling, but I'm not really sure.

I've "ordered" the Line 2 elements to be the same "order", but that hasn't helped, or I did it wrong.

Perhaps there's another way. e.g? Header Injections, social icon is always followed by a certain text?


the code I'm using so far:


.ancillary-header-primary-nav-position-top-center.has-primary-nav [data-nc-base="header"] [data-nc-group="top"] [data-nc-container]:first-child {
display: flex;
  flex-direction: column;
  align-items: flex-start;
.tweak-social-icons-style-regular .SocialLinks-link {
    margin: 0px;
[data-nc-base="header"] [data-nc-container="top-left"] [data-nc-element="tagline"] {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 6;
    -webkit-order: 6;
    order: 6;



Link to comment
  • Replies 0
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.