What’s the best way (CSS) to have the logo remain left justified with the navigation?
Header Style 9 with a centered logo.
Logo is 400×122 standard, 800×244 retina.
Using Header > Logo and Ad Space – Stretch container and 1200px content.
I’m currenting using the following CSS:
/*! LOGO ALIGNMENT PADDING – STYLE 9 */
.td-header-style-9 .td-header-sp-logo {
margin: 20px 765px 20px 0px;
padding-left: 0 !important;
}
@media only screen and (max-width: 1140px) {
.td-header-style-9 .td-header-sp-logo {
margin: 20px 765px 20px 0px;
padding-left: 0 !important;
}
}
That code seems to work, on responsive the logo does not look right however
– https://www.screencast.com/t/57krnj6r
You could remove that code and try something like this for example
– https://www.screencast.com/t/Sms4pmA7nt
It looks good responsive and on desktop
– https://www.screencast.com/t/p1444pWB3Zd
.td-header-style-9 .td_stretch_content_1200.td-logo-wrap-full {
max-width: 1200px;
}
.td-header-style-9 .td-header-sp-logo {
text-align:left;
}
Note there are Advanced CSS section sin the theme panel, if you want cod to apply only for specific devices.
Thanks for the css… that worked perfectly!
Is there any way to use a large logo (as in my site) and use a Header Ad to the right of it?
Most header styles have limits for the logo size, also the ad space is limited to the recommended Google Adsense sizes (728×90 for header)
– https://forum.tagdiv.com/header-styles/
– https://support.google.com/adsense/answer/17955?hl=en
If you use the recommended sizes there will be no problem, anything else will most likely require modifications.
