[Resolved] Add Color Line Under Sticky Header

Home Forums Support [Resolved] Add Color Line Under Sticky Header

Home Forums Support Add Color Line Under Sticky Header

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2356932
    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.

    https://imgur.com/a/n2Z2DvE

    #2356953
    Ying
    Staff
    Customer Support

    Hi Michelle,

    Can you link me to your site?

    #2356957
    Michelle

    Sure. Here it is.

    #2356967
    Ying
    Staff
    Customer Support

    Try this:

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

    That is perfect! Thank you, Ying!

    #2357092
    Ying
    Staff
    Customer Support

    You are welcome 🙂

    #2455398
    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;
    }
    #2455442
    Fernando
    Customer Support

    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?

    #2456222
    Michelle

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

    #2456237
    David
    Staff
    Customer Support

    Hi there,

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

    #2456267
    Michelle

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

    #2456497
    Ying
    Staff
    Customer Support

    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;
    }
    #2456511
    Michelle

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

    #2456532
    Leo
    Staff
    Customer Support

    Edited Ying’s code above to include sticky navigation.

    #2456549
    Michelle

    That did it. Thanks!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.