How to center the Logo in the Header

[Rehnfield]

Hey,

i tried several hours to just align the custom Logo to the center in the header. When i use the left in the Site title and tagline Settings i can manually adjust it by using site title left margin, but then its not responsive for mobile view.

i tried also using css like

#site-title img.site-title-logo{margin-left:auto;margin-right:auto;}  or “align:center;”

but it didnt work.

Videographie aus Hamburg

I couldn’t find any answers here in the forum or via google. Maybe the problem is just too easy so nobody asked yet

thank you in advance!

[User]

@Rehnfield

Try:

#site-title img.site-title-logo{display:block;margin:0 auto;}

Regards!

 

[Rehnfield]

Wow, that worked perfectly fine! Thank you so much!
im also wondering how to make the logo smaller on mobile devices. i tried

is-mobile #site-title img.site-title-logo{max-width:50%;}

in the same place, but it just doesnt seem to work.

[User]

@Rehnfield

If you only want a smaller size on phone, use .is-phone instead of .is-mobile and instead of {max-width:50%;} try {height:30.0em;}  or  {height:30px;}

Regards!

[Rehnfield]

Hm, that doenst seem to work on Phone. My current CSS Code is:

#site-title img.site-title-logo{display:block;margin:0 auto;}
.is-phone #site-title img.site-title-logo{height:10px;}

i now have the code written in Design->Weaver Xtreme Admin -> Main Options -> Font & Custom -> Custom CSS-Rules

 

[Rehnfield]

Hm, that doenst seem to work on Phone. My current CSS Code is:

.is-phone #site-title img.site-title-logo{height:10px;}

i now have the code written in Design->Weaver Xtreme Admin -> Main Options -> Font & Custom -> Custom CSS-Rules

 

[scrambler]

Strange, because I do not see the rule in your custom CSS Rules.

If the rule is really in the Theme Custom CSS Rule box, Try clearing all caches (Plugin, cloudflare…)

Also paste the block of rules from your theme Custom CSS Rule box here, at least the 2 before and the two after.

Right now here is what I see around the first rule discussed

.custom-logo-link {
display: block;
float: left;
margin-right: 2em;
max-width: 100%;
margin-top: 1%;
margin-left: 1%
}

#site-title img.site-title-logo {
height: auto;
padding-right: 1%
}

.custom-logo {
max-width: 100%
}

[User]

The only is-phone use I see is:

.is-phone #site-title img.site-title-logo{height:150px}

at the end of < style id ='weaverx-style-sheet-inline-css' type='text/css' >

[Author]

Posts