Header is Off on Site Since Upgrade to Weaver 5.6

[GR8FL]

Site: https://hattiesgarden.com/

Something happened during the update that I just noticed. You can see the header is not lining up properly near the right third.

This site has been through a lot of history, and perhaps there is a cleaner way to do this at this point. The header is based on a header image the width of the site (1200px) and a background image to create an extension behind it (1600px). It has the following in the CSS:

#header-image {background:url(https://hattiesgarden.com/wp-content/uploads/1600×250-5-4.jpg) center;overflow:hidden !important;}

You can reference this thread: https://forum.weavertheme.com/forums/topic/header-not-going-full-width-of-the-browser/ and this one: https://forum.weavertheme.com/forums/topic/weaver-xtremeversion-4-04-breaks-my-site/

Should I start all over again or is this an easy fix?

 

 

[scrambler]

This reply has been accepted as the best answer.

Make sure your header image is set to align > Center

Right now it is left aligned

[GR8FL]

I could have sworn you said to align left and apply the wvrx-fullwidth. But that might have been for the other site.

Align Center fixed it.

Is there a better way to do this header image other than the overlay? That was a long time ago and there have been advances.

Thank you.

[scrambler]

This is still the best way to obtain that behavior.

The point of this layout is to allow the header image to be full width without being too high on very large browsers.

On very large browsers the height is constant (never gets too high) and when the browser changes size, the image is cropped on the sides instead of scaled.

Then under a certain browser width, the image starts scaling proportionally so its height becomes smaller to stay proportionate to the height.

[GR8FL]

Thanks, @scrambler. Appreciate the fast help.

[Author]

Posts