Archived topic
Applying animated svg to header margin
6 replies · Started by Mark on June 1, 2020
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!
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 */
}Wow, thanks Dave, that was quick. I'll tinker with this and report back when I get it working. 👍
Deleted.
You're welcome - let us know :)
Got it working! Thanks for the fantastic support 😎
Awesome - glad to hear that
