[Resolved] Add Color Line Under Sticky Header

[Michelle]

Simple design question: how do I add a gray line beneath my sticky header? I am using a background color to achieve this, but it disappears on scroll, and shows beneath page content in various places, which is not desirable.

View post on imgur.com

[Ying]

Hi Michelle,

Can you link me to your site?

[Michelle]

Sure. Here it is.

[Ying]

Try this:

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

[Michelle]

That is perfect! Thank you, Ying!

[Ying]

You are welcome 🙂

[Michelle]

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;
}

[Fernando]

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?

[Michelle]

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

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michelle]

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

[Ying]

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;
}

[Michelle]

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

[Leo]

Edited Ying’s code above to include sticky navigation.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michelle]

That did it. Thanks!

[Author]

Posts