Difference between primary and site nav

Community Forums Forums General Discussion Difference between primary and site nav

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  neilgee 2 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #118004

    jenglish647
    Participant
    Post count: 19

    In the sample child theme I’m confused with the CSS…probably another dumb question here…..but what is the difference between the site navigation (.genesis-nav-menu) and the primary navigation (.nav-primary ). I’m trying to center the text in my navigation to spread out evenly instead of all of it going to the left….I can’t figure out how. Using the css from the sample child theme:

    http://www.genesisframework.com/

    and I’ve got my structure css like this if it makes any difference:
    [css]
    /* Site Containers
    ——————————————— */
    .site-container{
    margin: 0 auto;
    max-width: 1200px;
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 15px #000;

    }
    .site-inner{
    margin: 0 auto;
    max-width: 1140px;
    clear: both;
    padding: 10px;
    padding: 1rem;

    }
    .wrap {
    margin: 0 auto;
    max-width: 1140px;

    }
    [/css]

    my css for the navigation is looking like this:
    [css]
    /*
    Site Navigation
    —————————————————————————————————- */

    .genesis-nav-menu {
    clear: both;
    color: #999;
    font-family: Lato, sans-serif;
    line-height: 1.5;
    width: 100%;

    }

    .genesis-nav-menu .menu-item {
    display: inline-block;
    text-align: left;
    }

    .genesis-nav-menu a {
    border: none;
    color: #fff;
    display: block;
    padding: 28px 24px;
    padding: 2.8rem 2.4rem;
    position: relative;
    }

    .genesis-nav-menu a:hover,
    .genesis-nav-menu .current-menu-item > a,
    .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
    color: #333;
    }

    .genesis-nav-menu .sub-menu .current-menu-item > a {
    color: #999;
    }

    .genesis-nav-menu > .menu-item > a {
    text-transform: uppercase;
    }

    .genesis-nav-menu .sub-menu {
    left: -9999px;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
    width: 200px;
    z-index: 99;
    }

    .genesis-nav-menu .sub-menu a {
    background-color: #fff;
    border: 1px solid #eee;
    border-top: none;
    font-size: 14px;
    font-size: 1.4rem;
    padding: 16px 20px;
    padding: 1.6rem 2rem;
    position: relative;
    width: 200px;
    color: #999;
    }

    .genesis-nav-menu .sub-menu .sub-menu {
    margin: -54px 0 0 199px;
    }

    .genesis-nav-menu .menu-item:hover {
    position: static;
    }

    .genesis-nav-menu .menu-item:hover > .sub-menu {
    left: auto;
    opacity: 1;
    }

    .genesis-nav-menu > .first > a {
    padding-left: 0;
    }

    .genesis-nav-menu > .last > a {
    padding-right: 0;
    }

    .genesis-nav-menu > .right {
    display: inline-block;
    float: right;
    list-style-type: none;
    padding: 28px 0;
    padding: 2.8rem 0;
    text-transform: uppercase;
    }

    .genesis-nav-menu > .right > a {
    display: inline;
    padding: 0;
    }

    .genesis-nav-menu > .rss > a {
    margin-left: 48px;
    margin-left: 4.8rem;
    }

    .genesis-nav-menu > .search {
    padding: 14px 0 0;
    padding: 1.4rem 0 0;
    }

    /* Primary Navigation
    ——————————————— */

    .nav-primary {
    background-color: #002c5e;
    background-image: url(/wp-content/uploads/2014/08/menu-bg.jpg);
    border: 1px solid #6d6d6d;
    box-shadow: 2px 2px 3px #666;
    color: #999;

    }

    .nav-primary a:hover,
    .nav-primary .current-menu-item > a {
    color: #999;
    }

    .nav-primary .sub-menu a:hover {
    color: #333;
    }[/css]

    #118012

    neilgee
    Member
    Post count: 122

    If you mean the secondary menu – which is the full width one, use can use:

    #menu-secondary-navigation {
    text-align: center;
    }

    Neil Gee
    Coolest Guides

    #118125

    jenglish647
    Participant
    Post count: 19

    no. I’m using the main primary menu- not secondary…

    #118143

    neilgee
    Member
    Post count: 122

    just change the id selector and keep the CSS declaration


    Neil Gee
    Coolest Guides

    #118190

    jenglish647
    Participant
    Post count: 19

    Thank you for responding but I really don’t understand what you’re saying. I’m looking at the css that comes with the sample child theme and basically just trying to understand the difference between the primary navigation and site navigation and trying to figure out which part I need to change in order to make my main navigation centered. And how to center it to look like the one in this theme -http://my.studiopress.com/themes/foodie/#demo-full – spread out and centered. Do I make changes to the .genesis-nav-menu or to the .nav-primary?

    #118302

    neilgee
    Member
    Post count: 122

    the answer is essentially the same – if you want to center all links with all menus you do:

    .genesis-nav-menu {
    text-align: center;
    }

    if you want to target a specific menu, use the ID, eg:

    #menu-primary-navigation {
    text-align: center;
    }

    It would be easier if you post your URL and then I can specify that the exact selector to change, the last example you gave for foodie does not have a .nav-primary class – but all Genesis menus have a .genesis-nav-menu class


    Neil Gee
    Coolest Guides

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.