In some cases, you may want the logo to span the full-width of the header. Some suggest to put a background image in the #header element and then make the logo a transparent image. In my opinion, having a transparent logo is not good in itself not just for SEO. The logo is one of the most important images associated with a website, why would you put a transparent logo? If someone shares your site to Facebook or Twitter and if you don't have Open Graph tags on your site (which you should!), then one of the images that may be pulled from your site is your transparent logo! Well, enough of the ramblings, I think you're getting my point. ![Wink](https://vbmods.rocks/core/images/smilies/wink.png)
Here's a solution that uses the existing logo and adds custom CSS to style the header with a full-width image.
Note: Make sure the width of the banner logo matches the width of the header which is 1200px by default.
Add the following CSS in css_additional or in Sitebuilder > Style > CSS Editor.
![Wink](https://vbmods.rocks/core/images/smilies/wink.png)
Here's a solution that uses the existing logo and adds custom CSS to style the header with a full-width image.
Note: Make sure the width of the banner logo matches the width of the header which is 1200px by default.
Add the following CSS in css_additional or in Sitebuilder > Style > CSS Editor.
Code:
@media only screen and (max-height: 480px) { #header .site-logo img { max-height:none; } } @media only screen and (max-height: 360px) { #header .site-logo img { max-height:none; } } @media only screen and (max-width: 360px) { #header .site-logo img { max-width:344px; } #header .site-logo.header-edit-box { text-align: center; } } @media only screen and (max-height: 320px) { #header .site-logo img { max-height:none; } } @media only screen and (max-width: 320px) { #header .site-logo.header-edit-box { text-align: center; } #header .site-logo img { max-width: 304px; } } #header { position: relative; height: auto; } #header .header-cell { width: 100%; } #header .site-logo,#header .site-logo img { max-width: 100%; } #header .site-logo { padding: 0; } #header .site-logo img { display: block; } #header .toolbar { position: absolute; right: 0; bottom: -30px; padding: 0; width: auto; } @media only screen and (max-width: 440px) { #header .site-logo.header-edit-box { padding: 0; } }
Comment