Header Image Problem (Version 2.1)

  • Admin

    Syahir Hakim


    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;



    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:
    graphene 2.1.1.

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

    is there anything else i need to set?


    Syahir Hakim


    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;



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


    Syahir Hakim


    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;



    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.



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



    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



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

Viewing 9 posts - 61 through 69 (of 69 total)

  • You must be logged in to reply to this topic.
Graphene Themes Forum