Logo and Site Tittle in line

Hi there!

We would he happy to point you in the right direction, but I am not sure what the problem is. Can you tell us what the issue is and we might have a solution for you!

Hi Zack,

Thank you for replying.
I would like to have the logo (custom-logo) and the site title on the same line. Reading the posts I thought that maybe it is because both elements are “block” elements therefore they can’t be on same line.
Changing custom-logo’s style to inline makes it disappear. I tried to change site-title’s style to inline without touching the custom-logo and it does not make a difference.
I don’t know how else to explain the problem.

Hi mdb11,

I fully understand what you mean.

Got the same problem here. The logo is always shown above the site title. There is no option to show the title of the site (and the subtitle) on the left hand side and the logo of the site on the right hand side (that is what you meant with logo and title on the same line).

Is there any solution yet?

Hey there,

Something like this will do it:

.site-title, .site-description{float:left}
.site-description{margin-left:5px; padding-top:5px}

If you wanted to swap the order so the title is on the right which what I think StDo wanted unless I got it wrong, you could do this instead:

.site-title{float:right}
.site-description{float:left; margin-right:5px; padding-top:5px}

If the title and tagline take more than 50% of the top (from left of site title to right of menu) then it will fall to a new line still. You could change the width:

.site-navigation{max-width:40%}
.site-branding{max-width:60%}

Hope this helps.

Thanks Timothy.

I did it this way:

.site-title, .site-description{float:left; width: 70%}
.site-description{margin-left:5px; padding-top:5px}
.custom-logo{float:right; margin: auto}

But now the navigation is above the site title and not centered below. ??

Can you share a link so I can see what’s occurring?

Cheers.

I’ll send you a msg via Twitter…

If I understand correctly both “custom-logo” and “site-title” have “display:bock” as attributes. This is why the logo comes in first and then the site title underneath. I don’t want to change the order. I just want the site title and site description to be on the right side of Logo as in “inline”.
Can someone explain how to achieve this please?