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

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

Home Forums Support How do I make the header image overlap into next section?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #699910
    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

    GeneratePress 2.1.4
    #699996
    David
    Staff
    Customer Support

    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

    #700000
    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?

    #700028
    David
    Staff
    Customer Support

    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;
    }
    #700048
    Sean

    Thanks David!

    #700049
    David
    Staff
    Customer Support
    #700050
    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

    #700066
    David
    Staff
    Customer Support

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.