Centering Navigation
-
I am having all sorts of trouble centering my links in the navigation bar (under the header). I’ve tried the text:align (center), but am still having no luck. I’m working on a local machine so the site’s not live. Any thoughts on how to do this, and also on the child navigational links that are on the second tier (horizontal), would be deeply appreciated.
Here’s the code (hope it’s not too long for this):
#nav { display: block; float: right; width: 924px; background-color: #410013; height: 40px; margin-right: 0px; margin-bottom: 0px; border-right-width: 8px; border-left-width: 8px; border-right-style: solid; border-left-style: solid; border-right-color: #FFF; border-left-color: #FFF; margin-left: 0px; } #nav li { margin-right:25px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 19px; color: #FFF; } #nav li, #subnav li { float:left; list-style:none } #nav a, #nav a:visited { color:#FFF; text-decoration:none; } #nav a:hover, #nav a:active, li.current_page_parent a, li.current_page_parent a:visited, #nav li.current_page_item a, #nav li.current_page_item a:visited { color: #608b82; font-weight: bold; text-transform: uppercase; } #subnav { display: block; float: right; width: 926px; background-color: #BEBCAD; height: auto; margin-right: -5px; margin-bottom: 0px; border-right-width: 10px; border-left-width: 10px; border-right-style: solid; border-left-style: solid; border-right-color: #FFF; border-left-color: #FFF; margin-left: 10px; padding-top: 8px; padding-bottom: 8px; } #subnav li { color: #2b443f; line-height: 1px; margin-top: 8px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-left: 0px; } #subnav a, #subnav a:visited { color:#2b443f; text-decoration:none; } #subnav a:hover, #subnav a:active, #subnav li.current_page_item a, #subnav li.current_page_item a:visited { text-transform: uppercase; font-weight: bold; }
-
I’m sorry but it is beyond the scope of these forums to deal with general CSS issues. Try a dedicated CSS resource such as http://www.css-discuss.org/ instead. In the meantime, using Firefox with the Firebug add-on for this kind of CSS work.
http://getfirebug.com/Had no luck with firebug … and saw some css issues here.
Alas, I shall try the link you sent. Thanks for that.
General CSS queries can be asked in general CSS forums such as;
http://csscreator.com/forum
http://www.cssforum.com.pk/
http://css-tricks.com/forums/
http://www.welovecss.com/
http://www.codingforums.com/Would it have been better if I had put in the php code that I need to style in wordpress? Perhaps I need to put in code there to make the centering happen? I tried one of the other forums…but they are suggesting php changes (and are vague enough to really cause me more confusion).
<ul id="nav"> <?php wp_nav_menu('title_li=&depth=1'); ?> </ul> <?php if($post->post_parent) $children = wp_nav_menu("title_li=&child_of=".$post->post_parent."&echo=0"); else $children = wp_nav_menu("title_li=&child_of=".$post->ID."&echo=0"); if ($children && is_page()) { ?> <ul id="subnav"> <?php echo $children; ?> </ul></p> <?php } else { ?> <?php } ?>
Try searching for similar threads http://wordpress.org/search/
Thanks, Andrew. Have spent more hours on this than you would know searching for a workable solution.
- http://www.w3.org/Style/Examples/007/center.en.html
- http://wordpress.org/support/topic/centering-nav-menu-in-slim-theme?replies=3
- http://wordpress.org/support/topic/gridiculous-menu-site-navigation-cant-center?replies=5
- http://wordpress.org/support/topic/twenty-twelve-theme-center-align-items-main-menu?replies=5
- http://wordpress.org/support/topic/delicate-theme-how-to-center-navigation-bar?replies=7
- http://wordpress.org/support/topic/how-to-put-header-and-menubar-in-center?replies=3
- http://wordpress.org/support/topic/show-menu-in-center?replies=3
- http://wordpress.org/support/topic/center-menu-help?replies=14
- The topic ‘Centering Navigation’ is closed to new replies.