[Resolved] Logo & Branding Position

[ZEMDER]

Hi Guys,

Perhaps someone can help me with this topic. I have defined to show the title and logo of the site in the customizing of GP. In order to show the title and logo in a single line I have added this code tha works fine:

.site-branding{
	display:inline-block;
	vertical-align:middle;
	font-family:'Oswald';	
	color:#494949;
	padding-right:10px;
}

.site-logo{	
	
}

The problems is that title is shown before the logo, and I need to show the title after the logo. I’m not sure what would be the code to include into the .site-logo{}

Someone know how to do this ?

[David]

Hi there,

just this CSS should be required to move the site logo to the left:

.site-logo {
    float: left !important;
}

You can choose the font, size and color for the Site Title in the Customizer, eg. Typography > Header and Colors > Header.

If you want to create a gap between the two then add a margin-right: 1em; to the CSS i provided above.

[ZEMDER]

Hi David,

Thanks for your reply. The code works but the logo and title are shown vertically misaligned. I tried to fix with this code but does not work:

.site-header{
	vertical-align:middle;
}

A little doubt: Why GP show by default first the title and after the logo ? It’s not the opposite normally?

[David]

We’re looking at adding an option for the alignment in a later update.
If you can provide us a link to the site then i can have a look. You can edit your original topic and use the Site URL for privacy.

[ZEMDER]

Hi David,

My website is using right now an image that includes a logo and the text because I don’t have other option to solve this, I mean, putting the logo and the title in separate way, with vertical alignment.

As you can see the text does not look good because is shown distorted, what would not happen if I used a font directly (title).

Thanks,

[David]

Personally i would save the logo with the Zemder text as an SVG image. You can use this plugin to allow SVGs to be loaded:

https://wordpress.org/plugins/safe-svg/

SVGs are resolution independent so will look sharp no matter the screen size.

[ZEMDER]

David,

It’s an interesting alternative, but the only doubt with this would be the web browser support for .svg format.

I’m not sure what currently versions of Chrome, Firefox, Opera, Edge, IE, etc cant support this format. I’m thinking that if some visitor of the site has some web navigator that not support .svg, the image will not shown and perhaps the user experience will not have the better.

Would wonderful if GP include for the next release, options to change the position of title and the logo, and at the same time align in vertical way all elements placed on the header without use .css

[David]

SVG is supported across all browsers as far back as Internet Explorer 9 and Android v3. For your type of logo it really is the best method. You will also have pixel perfect control over it 🙂

[ZEMDER]

David,

Thanks for your comments and support. I will try to implement this option while GP can generate a new release with posibilities to change the position of title and logo. I think that would be very useful for many GP users.

[David]

You’re welcome.

[Author]

Posts