- This topic has 9 replies, 2 voices, and was last updated 4 years, 3 months ago by David.
-
AuthorPosts
-
January 20, 2020 at 3:18 am #1137663Werner
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!
January 20, 2020 at 4:22 am #1137716DavidStaffCustomer SupportHi 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 ?January 20, 2020 at 5:40 am #1137771WernerHi 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.
January 20, 2020 at 5:56 am #1137782DavidStaffCustomer SupportYou 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 Addhero-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,
January 21, 2020 at 6:40 am #1139034WernerHi 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?
January 21, 2020 at 8:02 am #1139304DavidStaffCustomer SupportNow 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-1137782January 21, 2020 at 8:17 am #1139327WernerPerfect, 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.
January 21, 2020 at 8:38 am #1139359DavidStaffCustomer SupportThat should work – i edited the CSS above to include it and another CSS rule for setting its size in mobile.
January 21, 2020 at 11:36 am #1139536WernerThanks a lot, David, it is now working! Great support!
January 21, 2020 at 4:10 pm #1139726DavidStaffCustomer SupportGlad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.