Hero Header 3rd Bar

[themisfit]

I am interested in creating the Hero Header, but what I would like to do is use the current hero template and then add an additional row below that. I would like this third lower row to also use the background of bar two as a background and would like it to container a full width container. Is this possible and how would I do it.

I have attached an image of what I am trying to do.

So what I want is:

Bar 1 Navigation
Bar 2 text container
Bar 3 Fullwidth container

All with a single hero image behind all three bars.

[ruenel]

Hello There,

Thanks for writing in! Since the all the bars shares the same background image, we will just make sue of a custom css to add it. Simply create your bars 1, 2, and 3 along with all the elements you need to display in each bar. And then in the custom css section, please add this code:

header.x-masthead {
    background-image: url(https://picsum.photos/1200/1000?image=1080);
    background-position: top center;
    background-size: cover;
}

Feel free to change the background. If the image is not visible, most probably, you bar background colors were not set to transparent.

Hope this helps.

[themisfit]

That worked amazing. Thanks.

[basanta]

You are most welcome!