Adding gradient to bottom border

[Isabelle Angele]

Hi all

I’m trying to add a gradient to the bottom border of my nav bar, similar to this site (http://shinebythree.com)

I linked below to the code I want to add, and I have been playing around with adding it to my .primary-nav-container and #primary-menu (not to the stick, as I don’t want a gradient there). Also, whenever I put it in there, it isn’t full-bleed to the sides.

If you go to my site (http://angelebaby.com), it’s easy to inspect element on my nav bar and help me figure it out. I’d be forever grateful!

https://codepen.io/anon/pen/gGNGey

[Paulie_D]

You’ve only supplied the CSS and without the HTML it’s of little use.

However, the gradient you are referring to (at least I think it what you are referring to) is, in fact, a box-shadow

#header {
    -moz-box-shadow: 0 8px 140px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 8px 140px 0px rgba(0,0,0,0.1);
    box-shadow: 0 8px 140px 0px rgba(0,0,0,0.1);
}

[Isabelle Angele]

Thank you, sorry I’m not super familiar with this.

I’ve added in the html for the primary nav menu, not sure if you need to see more? I added the bit of CSS you’ve supplied, and it works well, just for some reason the gradient goes above the nav bar as well. But thank you for your help!

https://codepen.io/anon/pen/gGNGey

[Author]

Posts