Hi Rebecca,
You can increase the width of the header in the CSS file. Look for .container { width: 1170px; } in the file and increase it by .container { width: 1358px; } Also, you need to remove the left and right padding from the class. You will find .container { padding-left: 15px; padding-right: 15px; } change both to 0px .container { padding-left: 0px; padding-right: 0px; }. You may find the .container class in the bootstrap.min.css file.
NOTE: This will be applied to your site logo and pull right image also. To make your site look proper, add this to the style.css file. Look for .logo class and add .logo { padding-left: 15px; }, .pull-right class and add .pull-right { padding-right: 15px; }.
I hope this will work for you.
There are 2 media queries in your css code. You will need to adjust both of them. One takes effect at 1200px and one at 992px. If you place code outside of the media queries it will only effect the layout when it above 1200px.
media (min-width: 1200px)
.container {
width: 100%;
margin: 0;
padding: 0;
}
@media (min-width: 992px)
.container {
width: 100%;
margin: 0;
padding: 0;
}
Hi All,
I agree to @mrtom414, thank you for correcting me! Apologies, I missed it!
Thanks,
Archana.
Thanks to both of you for your help!
I couldn’t find the .container class on it’s own in my style.css file or the bootstrap.min.css (but really appreciate you pointing out it may be there – I never would have known).
I downloaded the bootstrap.min.css from my theme parent folder and did a word search but only 3 results came up and none seemed to be right.
I tried adding the code you supplied to my child theme style.css (could be a foolish attempt, I’m not sure) either way it didn’t seem to work. It brought out the blue bar to the edge but removed my header image on the right and didn’t push the content on the rest of my page back in – off the edge of the window.
I’ve also not tried with the media queries yet as I thought I would get the code right first, but thanks for pointing out I need to add it there too!
Any further advice on where I’m going wrong?
I’m trying not to be painful but don’t think I’m succeeding! Thanks again.
I just tried using the width: 100% instead of width: 1358px; (still in the child theme style.css) and it successfully made the navigation bar go full, didn’t remove my header image and I can move the logo and header image – BUT all of my page content is sitting on the edges of the window now. I know this is because I’ve removed the padding from the .container but obviously this isn’t ideal but I’m not sure how to resolve it.
Is there a way I can move the page content in to where it was before I removed the padding (unless specified to be full width) but leave the navigation full width?
Thanks again for your help!
