Community Forums › Forums › Archived Forums › Design Tips and Tricks › Centering Menu Navigation Buttons
- This topic has 4 replies, 2 voices, and was last updated 10 years, 1 month ago by ejc.
-
AuthorPosts
-
March 29, 2014 at 12:08 pm #97289ejcMember
Is it possible to center the menu buttons in the Genesis Sample theme as discussed in this thread?
March 29, 2014 at 12:30 pm #97301nutsandboltsMemberYes, that's possible. Can you post a link to your site? It's always easier to help if we can see what you see.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+March 29, 2014 at 12:49 pm #97307ejcMemberSorry, but no.
Building out for a friend and they have not purchased their hosting yet.I was able to get this to work in another theme (Fairway) that has similar CSS to what is mentioned in the thread.
The Sample child theme though does not.What I find in the Sample theme is:
/*
Site Navigation
---------------------------------------------------------------------------------------------------- */.genesis-nav-menu {
clear: both;
color: #999;
font-family: Lato, sans-serif;
font-size: 18px;
font-size: 1.8rem;
font-weight: 600;
line-height: 0;
width: 100%;
}.genesis-nav-menu .menu-item {
display: inline-block;
text-align: left;
}.genesis-nav-menu a {
border: none;
color: #999;
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: none;
}.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;
}.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;
}/* Site Header Navigation
--------------------------------------------- */.site-header .sub-menu {
border-top: 1px solid #eee;
}.site-header .sub-menu .sub-menu {
margin-top: -55px;
}/* Primary Navigation
--------------------------------------------- */.nav-primary {
background-color: #333;
}.nav-primary a:hover,
.nav-primary .current-menu-item > a {
color: #fff;
}.nav-primary .sub-menu a:hover {
color: #333;
}/* Secondary Navigation
--------------------------------------------- */.nav-secondary {
background-color: #fff;
}/*
March 29, 2014 at 12:52 pm #97308nutsandboltsMemberIn general, you should be able to accomplish this by adding
text-align: center;
to .genesis-nav-menu.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+March 29, 2014 at 12:59 pm #97309ejcMemberWorked... I know I tried that! 🙂
Must have keyed something wrong before.Thanks Andrea
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.