Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 18, 2023 at 9:50 pm #1404856
    woogie07

    Hi

    I am looking to create a full width banner image with transparent header over the image. The image needs a reveal bottom to top animation.

    I have created this using a colour section + a 1 column layout element with the image as a background
    (see link in private)

    The image is not showing full width and the header is not transparent – the image stops at the header.

    Please advise what I need to change

    Thanka

    April 19, 2023 at 4:13 am #1404883
    Nikko

    Hi woogie07,

    Thanks for giving us a link to the page.
    When using Color Section, content like an image is contained within a specific width, using a background image is the only way to fully cover the width, unless we add some CSS to adjust the first color section. Please try to add this CSS code in Enfold > General Styling > Quick CSS:

    .home #main #av_section_1 .av-section-cont-open {
    padding: 0;
    max-width: 100%;
}

.home #main #av_section_1 .av-section-cont-open .av-content-full {
    padding: 0;
}

    Let us know if this helps.

    Best regards,
    Nikko

    April 19, 2023 at 6:31 pm #1404973
    woogie07

    That has worked.

    Thanks you so much for your help.

    April 20, 2023 at 1:20 am #1405010
    Mike

    Hi,
    Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Full width image banner with transparent header’ is closed to new replies.