7

[Syahir Hakim]

Syahir Hakim

#48689

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:

1. The header image now occupies a space within the container, and:
2. 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;
}

[strategy242]

strategy242

#48693

thank you very much for the explanation. unfortunately i could not get the problem fixed by adding the code above to the additional css. no matter what values i set for “top” and “left”, there is no space between top-bar and top-menue that would show the wow-slider.

here’s a screenshot using version 2.1.1:

and here’s the same (using the additional css) in version 2.1.2:

is there anything else i need to set?

[Syahir Hakim]

Syahir Hakim

#48694

In your case, since you don’t actually have a header image in there, you’ll need to set the height for the header:

#header {
   height: 300px;
}

[strategy242]

strategy242

#48697

thank you! it “opens” the space required between , yet the area is plain white…

[Syahir Hakim]

Syahir Hakim

#48698

Looks like it’s working from my end:

You can add the following code to remove the white gap above the Wow slider:

#header > img {
   display: none;
}

[strategy242]

strategy242

#48699

unfortunately it only worked, because i placed the wow-slider code-snippet directly into header.php (as i did before version 2.0). right now, the settings are as you suggested -> still white.

[Anonymous]

Anonymous

#48704

Thanks, got it working, had to do a ton of CSS overrides, lots of changes in what worked prior to 2.1 and now.

[Anonymous]

Anonymous

#48705

Thanks for the container info
I have a header image of 960x 90 , the container width is set to 960, the max header image size is set to 90
It’s still sliding the menu up over the bottom of the header image as the page resizes by dragging the right side of the page

[strategy242]

strategy242

#48886

the latest update 2.1.3 fixed my issues with the header (wow-slider)! great work!! thank you! 😉