Archived topic

Adding a line below navigation

7 replies · Started by Nicholas on January 21, 2018

Viewing posts 1–8 of 8

January 21, 2018 at 6:49 pm #476718

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

January 21, 2018 at 7:29 pm #476723

Hi Nicholas,

Try this:

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

Cheers!
Lyle

January 26, 2018 at 1:54 pm #480760

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!!

January 26, 2018 at 4:49 pm #480822

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?

January 26, 2018 at 7:12 pm #480879

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

January 26, 2018 at 11:37 pm #480924

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

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

January 27, 2018 at 1:40 am #480952

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

January 27, 2018 at 9:37 am #481232

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

This archived topic is closed to new replies.

Start building better websites today.