[Resolved] Header Element on top of Elementor's Image Carousel

[Werner]

Hi,
is it possible to lay the text of a GeneratePress header element I have created on top of an image carousel from elementor? When I active the header element, it pushes the carousel further down, I would like the text to be on top of the carousel (while still having the ability to navigate the images).

Thanks!

[David]

Hi there,

are you looking for just the Navigation and Logo to sit on top of the carousel?
Or will you be added text within the Header Element ?

[Werner]

Hi David,

I would like to add text into the carousel. I thought I could do that using the Header Element. I can attach images to the header element but I can’t connect that directly with the carousel. So I thought maybe I can shift the text of the header element down into the carousel? So that the text is layered on top of the image.

[David]

You would need to add the Carousel to the Header Element. Then we can use some CSS to overlay the content. Follow these steps:

1. Save the Elementor carousel as a template, then get its shortcode.
2. Create your header element:
2.1 Add hero-overlay to the Element Classes field
2.2 Add this to your content:

[Element shortcode here]
<div class="hero-overlay-content">
<!-- add your content to be overlayed here -->
</div>

2.3 The Carousel will set the height and width so set the padding to 0

3. add this CSS:

.hero-overlay {
    position: relative;
}
.hero-overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    font-size: 32px;
}
/* Mobile hero text size */
@media (max-width: 768px) {
    .hero-overlay-content {
        font-size: 20px;
    }
}

May need a little tweaking. Let us know,

[Werner]

Hi David,

Thanks for the answer. I have implemented what you wrote but all this seems to have done is that it duplicated the carousel. What went wrong there?

[David]

Now you can remove the Carousel from your page.
And i made a change to 3. CSS here: https://generatepress.com/forums/topic/header-element-on-top-of-elementors-image-carousel/#post-1137782

[Werner]

Perfect, thanks a lot. I tried changing the font size of the text in the element adding “font-size” to the CSS (.hero-overlay-content). That does not seem to work.

[David]

That should work – i edited the CSS above to include it and another CSS rule for setting its size in mobile.

[Werner]

Thanks a lot, David, it is now working! Great support!

[David]

Glad to be of help

[Author]

Posts