Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
JonJonJon

Custom Aligning/Ordering Header items

Question

shop.jonathan-gallagher.com

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;
}

 

headerexample.png

Share this post


Link to post

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...