How do I make the header image full width?

Sparkling
1

Hi People.
The header image on my site looks a bit silly when viewed on a large screen. Is there any way to make it full width?
My site, http://www.airfieldcards.com/wordpress/airfield_card/eaglescott/

Kind Regards
Vince.

2

Hi There,

Thanks for reaching out to us.

You can add the following custom CSS to your mobile layout to make the logo full-width.

@media screen and (max-width: 767px) {
.site-navigation-inner {
   padding:0px !important;
}
}

Hope this helps.

3

Thanks support for your quick response, but it’s on Larger screens where I want to increase the size of my header image to 100% or Full Screen.

See the image attached. I would like the “Airield Cards” image to go right over the red boxes.

Regards
Vince

4

hey there

Add this CSS in appearance - customize - additional CSS

site-header .container {
width: 100%;
margin: 0px !important;
padding: 0px !important;
}

and once you do this you have to use a bigger logo in the header to cover entire area

Thanks!
Colorlib Support Team

5

Thanks for coming back to me so soon, for anyone looking to do this in the future, that come to this thread. The above didn’t work, but with a period to select the site-header (full stop to us real English) then it does work.

.site-header .container {
width: 100%;
margin: 0px !important;
padding: 0px !important;
}
Kind Regards
Vince.

6

Looks much better now,
Is there anything else? :slight_smile:

7

I thought so, but I’ve fixed it.

I have installed a plugin called mega menu, which as you can see from the site, has many many airfield cards (460+) so that we could have them in alphabetical order in the menu. However, on a mobile, the original “hamburger menu” was still showing up, even though it wasn’t used. I simply commented out this code from header.php to remove it.

<!–<button type=“button” class=“btn navbar-toggle” data-toggle=“collapse” data-target=".navbar-ex1-collapse">
<span class=“sr-only”>Toggle navigation</span>
<span class=“icon-bar”></span>
<span class=“icon-bar”></span>
<span class=“icon-bar”></span>
</button>–>
BTW, I’ve marked this post as resolved :wink:
Kind Regards
Vince.

8

Hi There,

Thanks for the follow-up.

I’m glad to hear the good news.

Feel free to let me know in case something else comes up :slight_smile: