How to Add a Wide Line Above and Below the Main Navigation Menu

[Scott G.]

Does anyone know how to add a line (of color) above and below the main navigation bar? I am running the Smart Passive Income child theme.

Specifically, I'd like to add a line from end to end below the header and above the nav tabs in the color of my choice... in this case, gold.

I'd also like to add a line end to end below the nav tabs to appear on all pages EXCEPT the main page in the color of the set "secondary color" (in this case red).

My url is: http://investinggoldnow.com/

[emasai]

To place the line below the nav add a border-top

.front-page-1 {
    background: #b4151b;
    border-top: 3px solid gold;
}

and to add the line above the nav add a border-bottom

.site-header {
    background-color: #2d2c2a;
    border-bottom: 3px solid gold;
}

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Scott G.]

Thanks for your help Lynne. I was unable to get either line to work.

I tried editing the style.css file.

I was unable to find any code like this: .front-page-1
so I was unable to even try adding the code
(note that the line I am trying to add below the nav tabs is for all pages except the front page)

For the line above the nav tabs, I added the code you provided, but there was no change on any page.

Do you have any idea what I could be doing wrong??

Scott

[emasai]

Sorry I misunderstood, try adding this to .nav-primary and the rest just below that. This should add a border to all pages above and below the nav, and the rest removes the borders from the home page.
style.css file line 1510

.nav-primary {
background-color: #b4151b;
color: #fffefe;
position: relative;
border-top: 3px solid gold;
border-bottom: 3px solid gold;
}
.home .nav-primary {
border-top: none;
border-bottom: none;
}

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Scott G.]

Thank you!!

I was able to add the lines above and below the navigation tabs per your help.

I was not able to remove the lines from the front page though...
I cannot find the section beginning with .home .nav-primary {

I couldn't try your suggestion because I don't know where to put the code snippet.

If you check it out, note that the line below the nav tabs are red (the same color as the tabs). You will see the line when take a closer look... I made it 25 pixels wide, and the intention is to add some depth on all the pages except the front page (by depth, I mean a spacer between the navigation and the page, and due to shading, the line allows you to see which tab is active).

Thanks for everything - much appreciated!!

Scott

[emasai]

You can't find .home .nav-primary because it does not exist, you have to write it into the css, directly beneath .nav-primary.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Scott G.]

Ok, that worked... it's perfect now!!

Thank you for your expert help Lynne.

Scott

[Author]

Posts