The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Adding gradient to bottom border

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #261858
    Isabelle Angele

    Hi all

    I’m trying to add a gradient to the bottom border of my nav bar, similar to this site (

    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 (, it’s easy to inspect element on my nav bar and help me figure it out. I’d be forever grateful!


    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!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.