align Logo With Site Title

This topic has 11 replies, 5 voices, and was last updated 7 years, 10 months ago by David.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
February 4, 2016 at 1:16 pm #170443

Tony

I want to align the logo and site title vertically.
This works but is there a more reliable way to do it that doesn’t depend on a px value e.g. using something like vertical-align: middle (which I can’t make work)

.site-branding {
display: inline-block;
margin: 20px 0px 0px 0px;
}

February 4, 2016 at 6:10 pm #170513

Tom
Lead Developer
Lead Developer

Hi Tony,

vertical-align: middle only works with tables or elements mimicking tables, which isn’t very reliable either.

I would go with px – you can always use media queries to tweak them if things shift at different browser sizes.

Sooner than later I’m going to make an option in the Customizer that does this that will be super reliable 🙂

April 12, 2016 at 12:00 am #186102
Ryan
Hi Tom,

Can I ask when you are going to release the option in customiser to allow the logo to be aligned in the middle of the header? Right now I am using just a logo image – no text.

I’m trying to use some custom css but not working out well. text-align:center has no affect (but its ‘cheap shot css’) I was expecting margin: 0 auto; to work because the header has a defined width, but nothing is working out for me.

Not a big fan of using fixed pixels and then correcting them at breakpoints either…
- This reply was modified 9 years, 11 months ago by Ryan.
April 12, 2016 at 9:56 am #186236

Tom
Lead Developer
Lead Developer

You should be able to do this in “Customize > Layout > Header alignment”?

May 29, 2018 at 3:08 am #586879

Thierry

Hello,

I need the same thing, vertical align site-branding with site-logo, it’s possible ?

Thx

May 29, 2018 at 5:18 am #586944
David
Staff
Customer Support
Hi Thierry,

you can try flex box, something like so:
```
.inside-header {
    display: flex;
    align-items: center;
}
.site-branding {
    order: 1;
    margin-left: 20px;
}
```
May 29, 2018 at 8:18 am #587151

Thierry

Great, thanks David

May 29, 2018 at 8:20 am #587152

David
Staff
Customer Support

You’re welcome Thierry

May 29, 2018 at 10:48 am #587248

Thierry

So, how i can do fix this :

(a second menu float right)

May 29, 2018 at 1:32 pm #587342
David
Staff
Customer Support
You can try this:
```
.secondary-navigation {
    float: none;
    order: 2;
    margin-left: auto;
}
```
May 30, 2018 at 12:03 am #587595

Thierry

it’s work, thanks 🙂

May 30, 2018 at 2:29 am #587679

David
Staff
Customer Support

You’re welcome!
Author

Posts