More than one header area

[scrambler]

You need to precise the following.

There is the grey header image between the green one at the top and the people one, so wen you say between these two, you need to say if it is above or below the grey bar

Will this new image be different from page to page or is it the same one for the whole site.

In any case, instead of using a single widget in the header widget area and extending the widget area background, you could use two text widgets in the header widget area, and extend the widgets background.

The current text widget holding the current people image has the ID #text-3, let us say you add a new text widget in the Header widget area and it turns out to be #text-4, the CSS to extend the widget background would be.

.is-desktop #header-widget-area, .is-desktop #text-3, .is-desktop #text-4 {
  position: relative;
  overflow:visible;
}
.is-desktop #text-3:before {
    content: “”;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9999px;
    right: 0;
    border-left: 9999px solid #595A5B;
    box-shadow: 9999px 0 0 #595A5B;
    z-index:-1;
}

.is-desktop #text-4:before {
    content: “”;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9999px;
    right: 0;
    border-left: 9999px solid red;
    box-shadow: 9999px 0 0 red;
    z-index:-1;
}

.is-desktop #branding {z-index:auto;}

[weaverfan]

I find the solution in the “Advanced Options” – “HTML Insertion” – Pre Header Area. It shows now nearly everything it has to. Except the full width background color at the left and the right side. The color is now white and it has to be green. I tried many options but I can’t change it in green. Why?

Can you explain to me how I can get the green full width background color in the pre header area? 

The link is still the same:

sekosgelnhausen.de. The site is under construction so you have to fill in the username 7890 and the password 454545

[scrambler]

Right now you are using the wvrx-fullwidth class on the pre header container, but you did not give it any background color, so there is no color to extend.

But if you give a color to that container background you will have the same issue as before with it going over the wrapper.

So as I mentionned, brfore, to extend with a color instead of the whole container, you need to use the same custom CSS as before.

Remove the wvrx-fullwidth class, and add

.is-desktop #inject_preheader:before {
    content: “”;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9999px;
    right: 0;
    border-left: 9999px solid #DAF268;
    box-shadow: 9999px 0 0 #DAF268;
    z-index:-1;
}

[weaverfan]

Thank you very much! You saved my weekend. 🙂 

[Author]

Posts