Applying animated svg to header margin

[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!

[David]

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 */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

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

[Mark]

Deleted.

[David]

You’re welcome – let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

Got it working! Thanks for the fantastic support 😎

[David]

Awesome – glad to hear that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts