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

Home Forums Support Header Element on top of Elementor's Image Carousel

  • This topic has 9 replies, 2 voices, and was last updated 8 months ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1137663
    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!

    #1137716
    David
    Staff
    Customer Support

    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 ?

    #1137771
    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.

    #1137782
    David
    Staff
    Customer Support

    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,

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

    #1139304
    David
    Staff
    Customer Support
    #1139327
    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.

    #1139359
    David
    Staff
    Customer Support

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

    #1139536
    Werner

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

    #1139726
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.