Add Color Line Under Sticky Header

Hi Michelle,

Can you link me to your site?

Sure. Here it is.

Try this:

nav#mobile-header {
    border-bottom: 10px solid var(--base);
    box-shadow: none;
}

That is perfect! Thank you, Ying!

You are welcome :)

Hello. I liked this gray line design so much that I tried to add it to a different site, but the code didn't work on the new site. (Yes, I cleared the cache). Any suggestions?

nav#mobile-header {
    border-bottom: 10px solid var(--base);
    box-shadow: none;
}

Hi Michelle,

I tried viewing your site on mobile, and I can see the border.

Can you try clearing the cache of your mobile device?

Or, do you also want this for desktop view?

Yes, you are correct. I can see it on mobile, just not on desktop view. I am hoping to see it on desktop.

Hi there,

what happens if you move that CSS above any other CSS rules you have ?

I moved the CSS to the top, and see no change on the desktop.

The CSS is for mobile header, so it won't show on the desktop.

Try change your CSS to this:

nav#site-navigation, nav#mobile-header, #sticky-navigation {
     border-bottom: 10px solid var(--base);
    box-shadow: none;
}

That's much better. Is there CSS that would make the stripe remain on scroll? (I have a sticky header)

Edited Ying's code above to include sticky navigation.

That did it. Thanks!