Archived topic
align Logo With Site Title
11 replies · Started by Tony on February 4, 2016
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;
}
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 :)
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...
You should be able to do this in "Customize > Layout > Header alignment"?
Hello,
I need the same thing, vertical align site-branding with site-logo, it's possible ?
Thx
Hi Thierry,
you can try flex box, something like so:
.inside-header {
display: flex;
align-items: center;
}
.site-branding {
order: 1;
margin-left: 20px;
}
Great, thanks David
You're welcome Thierry
So, how i can do fix this :
(a second menu float right)
You can try this:
.secondary-navigation {
float: none;
order: 2;
margin-left: auto;
}
it's work, thanks :)
You're welcome!