I’ve added a masthead background in cutomize and a logo in theme options, and zero heading padding. It looks ok in the preview but on the site it looks like the background has doubled and it looks like there is padding around the logo (which is set to 0).
How to fix this? Also How do I get the logo to match up with the slider image (the red stripes need to match up)?
www.corporatebootcampsinternational.com
Thank you!
Karine
Got it!!! added this code
header#masthead hgroup {
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-left: 0 !important;
padding-right:0 !important;
}
.main-navigation {
margin-top: 0px !important;
}
fixed it but isn’t working responsive wise.
so now I’m adding an image to the masthead background with the logo on it, but the size isn’t right, needs to be 125px high and the site title is showing.
then I remove the site title, which also removed the background image.
I just want a full size image in the masthead section without the site title. Image is 1920×125
http://www.corporatebootcampsinternational.com
Hi Karine
I’m not sure it’ll be possible to match up the header and slider stripes when using the full width layout. The slider and header both scale as the site is stretched to fit the display it’s being viewed on so there is no fixed position to work off. What I’d suggest is using the boxed site layout available at Appearance > Theme Settings > Layout > Layout Bound: Boxed. Then add the following to Appearance > Custom CSS:
/* Full header logo */ header#masthead { padding: 0 !important; } header#masthead hgroup { padding: 0 !important; } header#masthead hgroup .logo img { width: 1080px; } .main-navigation { margin: 0 !important; } body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar { display: none !important; }That will allow your logo to take up the entire header area. The above CSS only applies correctly to the boxed layout. The logo should be 1080px wide.
Hi Andrew, thanks for getting back to me, I realise the stripes won’t stay in one place but would still like to know how to make that image full width without stretching and white spaces as it is now.
Awesome support, thank you!!!
For sure.
You’d need to separate your logo and the masthead background image. So the stripes, badge and text would need to be your logo and the camo background image needs to get added as the masthead background. If you then want your masthead background image to cover the given area in a scaling manner you can use the following Custom CSS:
/* Masthead Background Image Cover */ header#masthead { background-repeat: no-repeat; background-position: center center !important; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }Thank you Andrew for excellent support, greatly appreciated!
Super, glad we could help.