• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to Add a Wide Line Above and Below the Main Navigation Menu

This topic is: resolved

Tagged: http://investinggoldnow.com/

  • This topic has 6 replies, 2 voices, and was last updated 8 years, 8 months ago by Scott G..
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 7, 2016 at 11:41 am #192765
    Scott G.
    Member

    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/

    September 7, 2016 at 12:03 pm #192767
    emasai
    Participant

    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

    September 9, 2016 at 9:12 pm #192935
    Scott G.
    Member

    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

    September 10, 2016 at 9:42 am #192949
    emasai
    Participant

    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

    September 10, 2016 at 4:53 pm #192967
    Scott G.
    Member

    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

    September 11, 2016 at 9:29 am #192978
    emasai
    Participant

    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

    September 11, 2016 at 2:53 pm #192988
    Scott G.
    Member

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

    Thank you for your expert help Lynne.

    Scott

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble