[Support request] How do I make the header image overlap into next section?

[Sean]

Hi,

As you can see the end of the vector bird’s tale is just cut out at the bottom of the GP header, how do I make it so the tale overlaps into the next section that I created in Elementor?

Also, how do I push the header image further down so the headers “Red Hawks Media” and “Conversion Based Media” sit on top of the red background only?

Thanks,
Sean

[David]

Hi there,

background images cannot extend outside of their container, so overlapping is not possible this way.The SVG would have to be added as an <img> in the page hero content. Then we could use some CSS to position it with negative margins or positioning.

If you want to put the image in the content we can have a look

[Sean]

Thanks David, have added as an img to page hero, could you recommend the CSS to achieve the effect, please. Also, I’m assuming it is probably best to add the CSS using the simple CSS plugin instead of the GP core CSS?

[David]

OK, responsiveness may be an issue as the Hero is full height, so may require some tweaking. But this is the principle.
First give the Hero an Element Class of hawk-hero and then add this CSS to Simple CSS:

.hawk-hero {
    position: relative;
}

.hawk-hero img {
    position: absolute;
    left: 0;
    right: 0;
    top: 15vh;
}

[Sean]

Thanks David!

[David]

You’re welcome.

[Sean]

One more question, now that I have the .svg in place, my h1 and h2 are out of place, how do I move them back to just under the navigation as before?

Thanks

[David]

Switch your top and bottom padding around ie. Top 10% bottom 40%

[Author]

Posts