Archived topic
Adding a tooth pattern at the bottom of navigation
5 replies · Started by Rob on September 9, 2021
Viewing posts 1–6 of 6
I want to add a tooth pattern (as attached to the bottom of my navigation bar with the log appearing as the visual
Can this be done, I have tried varioud css methods but can't seem to get it to work
thanks
Hi there,
do you have a link tot the site you want to apply that affect to?
Yes thank you: https://www.northyorkshireweddingphotographer.co.uk/wowsite/
Maybe this CSS - but note that it won't work with a sticky navigation....
.main-navigation {
position:relative;
}
.main-navigation:before,
.main-navigation:after {
background:#d64425;
content:"";
height:1.5vw;
position:absolute;
top:100%;
left:0;
width: 50%;
clip-path:polygon(
0 0, 2.5% 100%, 5% 0, 7.5% 100%,
10% 0,12.5% 100%,15% 0, 17.5% 100%,
20% 0,22.5% 100%,25% 0, 27.5% 100%,
30% 0,32.5% 100%,35% 0, 37.5% 100%,
40% 0,42.5% 100%,45% 0, 47.5% 100%,
50% 0,52.5% 100%,55% 0, 57.5% 100%,
60% 0,62.5% 100%,65% 0, 67.5% 100%,
70% 0,72.5% 100%,75% 0, 77.5% 100%,
80% 0,82.5% 100%,85% 0, 87.5% 100%,
90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0);
}
.main-navigation:after {
left: 50%;
}Your a top man thats perfect thank you!!!
Awesome - glad to be of help!
This archived topic is closed to new replies.
