[Resolved] Applying animated svg to header margin

Home Forums Support Applying animated svg to header margin

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1309761
    Mark

    I’m using Mike Oliver’s “Service” template, which you can see here: https://gpsites.co/service/

    It has a slanted edge to the bottom of the header section. I’m trying to replace it with an animated svg wave, which you can see here: [link removed]

    While it’s simple to do that in a primitive html file, it’s taken me hours of unsuccessful attempts with the template. I have put the CSS into the Custom CSS section, probably incorrectly, and tried in many different ways to get it to work on the home page.

    I realize this is probably out of scope for the forum, but any help would be much appreciated!

    #1310306
    David
    Staff
    Customer Support

    Hi there,

    my first thoughts would be to add a HTML Block inside the Container Block.
    I assume the HTML for the waves will have an outer DIV with a CSS class we can target eg.

    <div class="wave-divider">
    <!-- rest of wave HTML in here -->
    </div>

    Then you could do this:

    1. Add a Additional CSS Class to the parent container block of: relative-position
    2. Then add this CSS:

    .relative-position {
        position: relative;
    }
    .relative-position .wave-divider {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100px; /* Adjust height to suit */
    }
    #1310390
    Mark

    Wow, thanks Dave, that was quick. I’ll tinker with this and report back when I get it working. 👍

    #1310518
    Mark

    Deleted.

    #1310852
    David
    Staff
    Customer Support

    You’re welcome – let us know 🙂

    #1310896
    Mark

    Got it working! Thanks for the fantastic support 😎

    #1310910
    David
    Staff
    Customer Support

    Awesome – glad to hear that

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.