Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to Add a Wide Line Above and Below the Main Navigation Menu
Tagged: http://investinggoldnow.com/
- This topic has 6 replies, 2 voices, and was last updated 7 years ago by
Scott G..
-
AuthorPosts
-
September 7, 2016 at 11:41 am #192765
Scott G.
MemberDoes 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/
September 7, 2016 at 12:03 pm #192767emasai
ParticipantTo 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.comSeptember 9, 2016 at 9:12 pm #192935Scott G.
MemberThanks 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
September 10, 2016 at 9:42 am #192949emasai
ParticipantSorry 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.comSeptember 10, 2016 at 4:53 pm #192967Scott G.
MemberThank 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
September 11, 2016 at 9:29 am #192978emasai
ParticipantYou 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.comSeptember 11, 2016 at 2:53 pm #192988Scott G.
MemberOk, that worked... it's perfect now!!
Thank you for your expert help Lynne.
Scott
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.