Line underneath sticky menu

Hi there,

Give this CSS a try:

nav#sticky-navigation, header#masthead {
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}

If it doesn't work, can you link us to your site? Thanks!

Hello, the lines do appear but only upon scrolling down. Is there a way to have them present permanently? Also when scrolling down I notice the logo disappears

I sorted the logo out had to use the same height for both primary and sticky nav logo. Still working on the lines being permanently on above/below primary nav menu.
GP Premium 2.0.3

If you are not using Navigation as header option, then try this edited CSS:
https://generatepress.com/forums/topic/line-underneath-sticky-menu/#post-1930608

It's better to link us to your site, so we can see what your current setting is.

Hello,

Thank you for your message.

Still does not work exactly as I wanted it.

I am using the navigation as header option.
The site is still in progress but here is the link: *[link removed]*

Then use this CSS:

nav#site-navigation, nav#sticky-navigation {
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
}

Replace the greywith your color code :)

Many thanks, that worked!

You are welcome :)

Hello, I just realised that works only for desktop but not mobile.

Hi there,

Can you link us to your site again?

The site info has been erased since the topic has been marked as resolved.

Thanks!

Apart from the desktop view where the code works, the tablet and mobile versions have not responded ot the code.

Also when scrolling down the sticky Nav menu flickers which appears odd. An example off what I want to achieve is the cnn.com nav which stays put on scrolling down

Since you are using mobile header, the CSS I provided wouldn't work on it, so try this one instead:

nav#site-navigation, nav#sticky-navigation, nav#mobile-header {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

But if you don't want any animation during transition of the sticky navigation, can you disable the sticky navigation first?
So we can work on a pure CSS solution.

Let me know :)

The solid line now is now working , many thanks
Sticky navigation is off , I am happy to try a css code

Give this CSS a try:

nav#site-navigation, #mobile-header {
    position: fixed;
    width: 100%;
    top: 0;
}
div#page {
    padding-top: 50px;
}

Let me know :)