Archived topic
Get header logo, title and tagline in line with each other
7 replies · Started by Daniel on March 9, 2019
Hi there,
How can I get the site title, tagline and the logo all in line with each other horizontally?
They are currently stacked up under each other, I'd like to have them in line as so (logo, title, tagline).
I've had a look through the forum and found the following css:
@media (min-width:769px) {
.site-branding {
display: inline-block;
}
.site-logo {
float: left;
margin-right: 20px;
}
}
However, this doesn't seem to work and the order remains the same.
Many thanks.
Hi there,
That CSS should work.
Any chance you can link me to the site with the CSS added>
Let me know :)
Hi Leo,
This is the link to the site:
I've added the CSS above in the Simple CSS part of site appearance customization.
Many thanks
Hi there,
you have some errors in the CSS above that rule:
1.
.site-logo {
max-width: 55px;
max-height: 55px;
}
}Remove the last }
2.
.site-header {
margin-bottom: 2px;Add a } after this rule.
Hi David,
Thanks a lot for having a look at this. I made some changes to the CSS last night and must have missed those errors :)
After these changes the logo is fine, however the site tagline still seems to be under the title. Any way of getting this on the right of the title?
Many thanks.
Try this:
.site-branding > p {
display: inline;
}That works great David!
Thank you very much for your help David & Leo.
Have a great day!
You're welcome, glad we could be of help
