Community Forums › Forums › Archived Forums › Design Tips and Tricks › Center align secondary navigation menu
Tagged: center align navigation menu
- This topic has 4 replies, 2 voices, and was last updated 8 years, 3 months ago by Peter.
-
AuthorPosts
-
December 23, 2015 at 10:06 am #174644PeterParticipant
Hello,
I've moved my secondary navigation menu to "before footer". Now I just have to center align it. I've tried a bunch of things but nothing seems to work. I can get it to the right, and to the left. But can't seem to center align it.
Can anyone tell me how to do this? Would be great. Below is the navigation section of the style.css
/* Header / Primary / Secondary Navigation ------------------------------------------------------------ */ .menu-primary, .menu-secondary { clear: both; color: #222; margin: 0 auto; overflow: hidden; width: 100%; } #header .menu { float: right; background: url(images/gray-texture.jpg); font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; text-transform: uppercase; border-top: 1px solid #ddd; border-right: 1px solid #ddd; border-left: 1px solid #ddd; } .menu-primary, .menu-secondary { background: } .menu-primary, .menu-secondary { float: left; margin: 0 0 20px; } .menu-primary ul, .menu-secondary ul { width: 100%; } .menu-primary li, .menu-secondary li, #header .menu li { float: right; list-style-type: none; } .menu-primary a, .menu-secondary a, #header .menu a { color: #222; display: block; padding: 6px 15px 5px; position: relative; text-decoration: none; } .menu-primary li a:active, .menu-primary li a:hover, .menu-primary .current_page_item a, .menu-primary .current-cat a, .menu-primary .current-menu-item a, .menu-secondary li a:active, .menu-secondary li a:hover, .menu-secondary .current_page_item a, .menu-secondary .current-cat a, .menu-secondary .current-menu-item a, #header .menu li a:active, #header .menu li a:hover, #header .menu .current_page_item a, #header .menu .current-cat a, #header .menu .current-menu-item a { background-color: #fff; } .menu-primary li li a, .menu-primary li li a:link, .menu-primary li li a:visited, .menu-secondary li li a, .menu-secondary li li a:link, .menu-secondary li li a:visited, #header .menu li li a, #header .menu li li a:link, #header .menu li li a:visited { background-color: #f5f5f5; border-bottom: 1px solid #ddd; border-top: 1px solid #fff; color: #222; font-size: 14px; padding: 10px 15px; position: relative; text-align: left; text-shadow: #fff 1px 1px; text-transform: none; width: 138px; } .menu-primary li li a:active, .menu-primary li li a:hover, .menu-secondary li li a:active, .menu-secondary li li a:hover, #header .menu li li a:active, #header .menu li li a:hover { color: #d05353; } .menu-primary li ul, .menu-secondary li ul, #header .menu li ul { -moz-box-shadow: 0px 1px 3px #ccc; -webkit-box-shadow: 0px 1px 3px #ccc; box-shadow: 0px 1px 3px #ccc; height: auto; left: -9999px; margin: 0 0 0 1px; position: absolute; width: 168px; z-index: 9999; } .menu-primary li ul a, .menu-secondary li ul a, #header .menu li ul a { width: 130px; } .menu-primary li ul ul, .menu-secondary li ul ul, #header .menu li ul ul { margin: -44px 0 0 168px; } .menu li:hover ul ul, .menu li.sfHover ul ul { left: -9999px; } .menu li:hover, .menu li.sfHover { position: static; } ul.menu li:hover>ul, ul.menu li.sfHover ul, #header .menu li:hover>ul, #header .menu li.sfHover ul { left: auto; } .menu-primary li a.sf-with-ul, .menu-secondary li a.sf-with-ul, #header .menu li a.sf-with-ul { padding-right: 25px; } .menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator { background: url(images/arrow-down.png) no-repeat; height: 16px; position: absolute; right: 0px; text-indent: -9999px; top: 17px; width: 16px; } li:hover ul ul, li.sfHover ul ul { left: -9999px; } li:hover, li.sfHover { position: static; } #wpadminbar li:hover ul ul { left: 0; } /* Primary Navigation Extras ------------------------------------------------------------ */ .menu li.right { float: right; padding: 6px 15px 5px; } .menu li.right a { background: none; border: none; color: #222; display: inline; text-decoration: none; } .menu li.right a:hover { color: #d05353; text-decoration: none; } .menu li.search { padding: 0 10px; } .menu li.rss a { background: url(images/rss.png) no-repeat center left; margin: 0 0 0 10px; padding: 0 0 0 16px; } .menu li.twitter a { background: url(images/twitter-nav.png) no-repeat center left; padding: 0 0 0 20px; }
Cheers,
Peter.
http://beyourselfsocially.comDecember 23, 2015 at 2:47 pm #174673blogger boutiqueParticipantWhat code did you use to reposition the secondary navigation? For some reason, it won't even let me inspect it. Maybe try using code from this link, and changing your hook?
http://briangardner.com/code/navigation-menus/#reposition-secondary
http://genesistutorials.com/visual-hook-guide/Let me know if that is what you followed, and I'll try to troubleshoot getting it aligned for you.
December 24, 2015 at 2:30 am #174703PeterParticipantThanks for your reply.
I have no idea why it won't let you inspect the code. But that's the code I used to reposition the navigation menu.
I tried changing the hook but that doesn't change much.
December 26, 2015 at 1:00 am #174818PeterParticipantAnyone else want to chime in?
I've been trying out some other things I've found on the forum but it's not working.
Cheers,
Peter.
December 28, 2015 at 9:58 pm #175009PeterParticipantI got this figured out by starting another forum thread.
to center that menu, add a text align center to the subnav
#subnav { text-align: center; }
then remove the float: right on the menu items and add a display: inline-block instead
#subnav .genesis-nav-menu li { display: inline-block; float: none; }
Many Thanks to Jamie Mitchell from http://www.jamiemitchelldesign.com.au
-
AuthorPosts
- The topic ‘Center align secondary navigation menu’ is closed to new replies.