The header image is now responsive, meaning it will adapt its width and height according to the width and resolution of screens with different sizes. Because of this, we had to change the implementation from being a background image of a container, to an element within the container itself.
This means two things:
- The header image now occupies a space within the container, and:
- The height of the container itself follows the size of the header image, in order to accommodate it.
When you add a widget area to the header image, that widget now appears after the header image, instead of on top of it. However, the header container now also has a maximum height which it won’t exceed, regardless of the content inside the header container. (You can set this property in Customizer > Graphene: General > Header). This results in your header widget not being visible, as the header image has taken all the available height in the header container.
This requires the header widget to be positioned manually, that overrides the default order of elements in the header container. Here’s a sample code that you can use in Additional CSS. It’s quite self-explanatory so you can tweak it to your needs.
#graphene-dynamic-widget-graphene_header {
position: absolute;
top: 10px;
left: 10px;
}
Admin
