[Support request] Adding a line below navigation

[Nicholas]

Hi, how do I add a simple border/line on the bottom of my navigation menu/header area? Like the red line I drew in this screenshot: https://cl.ly/oyD1

[Lyle]

Hi Nicholas,

Try this:

.site-header {
	border-bottom: 4px solid red;
     box-shadow: 1px 2px 2px rgba(0, 0, 0, .5);
}

Cheers!
Lyle

[Lili]

Hi Lyle!
Any suggestions on how to do something similar to this, white/transparent like line under header :https://spa.oceanwp.org/
that shows up on mobile as well?

Thank you!!

[Leo]

Hi there,

Try this:

.main-navigation {
    border-bottom: 1px solid rgba(255,255,255,.2);
}

Can you link us to the site if this doesn’t work?

[Lili]

Thanks Leo! Mobile looks great! but on desktop it doesn’t extend to logo, any suggestions?
site: https://uniwebstudio.com

[Tom]

Since you’re using the full header, you would have to do this:

.inside-header {
    border-bottom: 1px solid rgba(255,255,255,.2);
}

[Lili]

Hi Tom,
Works great on desktop, but how can I also make it show up on mobile? (.main-navigation worked great for mobile but not desktop) Thank you

[Tom]

This should do it:

@media (max-width: 768px) {
    .main-navigation {
        border-bottom: 1px solid rgba(255,255,255,.2);
    }
}

@media (min-width: 769px) {
    .inside-header {
        border-bottom: 1px solid rgba(255,255,255,.2);
    }
}

[Author]

Posts