How to make logo/header full width (yes, again!)

So you want to make your logo image (which is 940px wide) stretch the whole width of the screen?

That would make for a really odd image if it was forced stretched? Maybe you can post a screenshot of what your thinking?

Kadence Themes

Thanks for your response. The current image was cropped out of a larger one, so making it wider is easy. In fact, when I tried the ‘background image workaround’ mentioned previously, the image was 1024px wide. I should have said what happened with that attempt. The image appeared full width but was positioned way down the page.

The look I’m aiming for is simply the current one but without the left and right margins. I fully understand that the theme is not designed this way, and why you use the word ‘logo’ rather than ‘header’. Virtue is the best free theme bar none, and your service is exemplary. For me, the header issue is, and always has been, the one design flaw. Headers (in contrast with logos) are usually full width, as here (the gold standard of web design) and here. Fix this and you have a theme that’s close to perfect!

Hope this clarifies things. Thanks again, and best wishes from Bath in the west of England.

Hey,
So both sites you linked to have a logo and a background color for the header. That has always been possible. Neither site is using an image as a fullwidth banner in the header.

So I’m confused. You can add a logo. then place a header background behind that logo that fills the whole width of the screen. Is that not what you’re asking for now?

Kadence Themes

Oh and here is css to make the logo fullwidth:

.headerclass>.container {
    width: 100%;
}
.kad-header-left {
    padding: 0;
}
#thelogo img {
    width: 100%;
}

That will of course stretch your image.

Kadence Themes

Update:

I added your CSS to Advanced settings:

.headerclass>.container {
    width: 100%;
}
.kad-header-left {
    padding: 0;
}
#thelogo img {
    width: 100%;
}

Then I uploaded a new header (a.k.a. logo) image that’s 1024px wide.

However, the image still has approx. 42px of white space left and right.

See https://reorg.international

I’m considering retrying the background image workaround. I tried this a few days ago and although the image displayed full width, i.e. without the white strip left and right, but the image displayed some 500px (that’s a guess) below the desired position.

Seems that I now have two options:

1) Retry the background image workaround and let you know when that’s done so you can have a look and see what’s going wrong, or

2) Live with the current state of affairs.

Please advise.

Thanks.

Just spotted my typing error. Amended version:

I’m considering retrying the background image workaround. I tried this a few days ago and although the image displayed full width, i.e. without the white strip left and right, the image displayed some 500px (that’s a guess) below the desired position.

Apologies.

Hey,
The css I posted should have sent the image to fullwidth. with no space can you add back so I can see?

Kadence Themes

Sorted! I eventually discovered that > has to be entered as a ‘greater than’ symbol. Looks great: https://reorg.international.

Thanks for going to so much trouble. I’m very grateful.

In case you’re wondering, the coastal city is Monaco, and the tall building is part of the Monte Carlo casino. I hope good fortune comes your way.

Jack

Hello.

.headerclass>.container {
width: 100%;
}
.kad-header-left {
padding: 0;
}
#thelogo img {
width: 100%;
}

This CSS code work on desktop.
How to get full width logo on smartphones?
screenshot

Change this:

.headerclass>.container {
    width: 100%;
}

To this:

.headerclass>.container {
    width: 100%;
    padding: 0 15px;
}

Kadence Themes

That worked great! Thank you very much!