Community Forums › Forums › Archived Forums › General Discussion › Difference between primary and site nav
- This topic has 5 replies, 2 voices, and was last updated 9 years, 8 months ago by neilgee.
-
AuthorPosts
-
August 9, 2014 at 6:58 pm #118004jenglish647Member
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:/* 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; }
my css for the navigation is looking like this:
/* 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; }
August 9, 2014 at 8:44 pm #118012neilgeeMemberIf you mean the secondary menu - which is the full width one, use can use:
#menu-secondary-navigation { text-align: center; }
Neil Gee
WP Beaches
Coolest GuidesAugust 10, 2014 at 7:52 pm #118125jenglish647Memberno. I'm using the main primary menu- not secondary...
August 11, 2014 at 12:49 am #118143neilgeeMemberAugust 11, 2014 at 8:28 am #118190jenglish647MemberThank 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?
August 11, 2014 at 5:44 pm #118302neilgeeMemberthe 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
WP Beaches
Coolest Guides -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.