CSS for a gradient on navbar-bottom

[KimAnn]

Hello-

Wondering if anybody out there is a CSS wizard. I want to greate a 5px wide gradient for the bottom border of the navbar. Tried this so far, not suprised it didn’t work:

.x-navbar .border-bottom {
background: 5px solid -webkit-linear-gradient(left, #79cc9e 0%,#beedec 25%,#c5ceff 50%,#cabd96 75%,#b591c7 100%);
}

Any help would be awesome!

[Rosalynn_Ashwood]

Hello,

I think this should work for you:

.x-colophon.bottom {
border-bottom: 5px solid;
-moz-border-image: -moz-linear-gradient(to left, #79cc9e 0%,#beedec 25%,#c5ceff 50%,#cabd96 75%,#b591c7 100%);
-webkit-border-image: -webkit-linear-gradient(to left, #79cc9e 0%,#beedec 25%,#c5ceff 50%,#cabd96 75%,#b591c7 100%);
border-image: linear-gradient(to left, #79cc9e 0%,#beedec 25%,#c5ceff 50%,#cabd96 75%,#b591c7 100%);
border-image-slice: 1;
}

The .x-colophon.bottom tag is what I needed to apply it to my footer. Hope this helps!

Best,
Rosalynn

[KimAnn]

THANK YOU! You seriously rock for sharing this

[KimAnn]

On mobile the border seems to go around the entire footer (and navbar). Check it here:
https://leadas.love

Any thoughts on how to just have this on the top of the footer and bottom of the navbar?

[Rosalynn_Ashwood]

Happy to help!

I just checked it out and it looks like it is doing exactly that, for desktop and mobile sizes. Did you fix it?

[KimAnn]

on mobile it is still bordering the entire navbar and footer. Here are some pics:

[KimAnn]

Hi again @Rosalynn_Ashwood . You can see the border in the header and footer wrapping the entire perimeter if you look in safari:
https://leadas.love

It seems SO CLOSE to what I need. Not sure if you do custom CSS work but I am willing to hire for a few hours to perfect this if so. Thanks and let me know!

[Rosalynn_Ashwood]

I see what you mean. It’s difficult to test from just using the browser inspector, but try adding this to your code, underneath where it says border-image-slice:

border-image-width: 0 0 5px 0;

If that works, try removing the border-bottom styling because it might no longer be necessary, even for browsers other than Chrome.