Header Element on top of Elementor's Image Carousel

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 ?

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.

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,

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?

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

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.

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

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

Glad to be of help