Support » Fixing WordPress » Center or justify my top navigation bar

  • Hi,

    I’m new to this forum, and to WordPress. I have recently taken over managing a WordPress site at work (http://www.futureoflondon.org.uk/) and have a lot to learn on it.

    I would like to center (or justify – but I think centering may be easier?) my top navigation bar. I think I have found the right part of my CSS file (“Nav Menu”) but I am not sure where in the code I should add/modify. I have read other posts on this topic but I can’t seem to get their solutions to work for me. The code is below. Any help would be great.

    Thanks!

    Jenn

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    /***** Nav Menu ********************/
    
    #nav {
    	clear: both;
    	color: #000000;
    	margin: 0 auto 0;
    	padding: 0;
    	}
    
    #nav .wrap {
    	background: #ffd503;
    	width: 960px;
    	height: 45px;
    	margin: 0 auto 0;
    	-moz-border-radius-topleft: 10px;
    	-moz-border-radius-topright: 10px;
    	-khtml-border-radius: 10px;
    	-webkit-border-top-left-radius: 10px;
    	-webkit-border-top-right-radius: 10px;
    	-webkit-border-bottom-left-radius: 0;
    	-webkit-border-bottom-right-radius: 0;
    	}
    
    #nav ul {
    	width: 950px;
    	float: left;
    	list-style: none;
    	margin: 0;
    	padding: 0 0 0 10px;
    	}
    
    #nav li {
    	float: left;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	}
    
    #nav li a {
    	color: #000000;
    	display: block;
    	font-size: 14px;
        margin: 0;
    	padding: 13px 17px 12px 5px;
    	text-decoration: none;
    	position: relative;
    
    	}
    
    #nav li a:hover, #nav li a:active {
    	background: #ffd503;
    	color: #999999;
    	}
    
    #nav li a.sf-with-ul {
    	padding-right: 20px;
    	}	
    
    #nav li a .sf-sub-indicator {
    	background: url(images/arrow-down.png);
    	display: block;
    	width: 10px;
    	height: 10px;
    	text-indent: -9999px;
    	overflow: hidden;
    	position: absolute;
    	top: 19px;
    	right: 5px;
    	}
    
    #nav li a:hover .sf-sub-indicator {
    	background: url(images/arrow-down-hover.png);
    	}
    
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    	background: #ffd503;
    	color: #000000;
    	width: 138px;
    	margin: 0;
    	padding: 6px 10px 6px 10px;
    	border-bottom: 1px dotted #CCCCCC;
    	text-transform: none;
    	position: relative;
    	}
    
    #nav li li a:hover, #nav li li a:active {
    	background: #ffd503;
    	color: #999999;
    	}
    
    #nav li li a .sf-sub-indicator, #nav li li a:hover .sf-sub-indicator {
    	background: url(images/arrow-right.png);
    	top: 10px;
    	}
    
    #nav li ul {
    	z-index: 9999;
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 160px;
    	margin: 0;
    	padding: 0;
    	}
    
    #nav li ul a {
    	width: 140px;
    	}
    
    #nav li ul a:hover, #nav li ul a:active {
    	}
    
    #nav li ul ul {
    	margin: -33px 0 0 158px;
    	}
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul {
    	left: -999em;
    	}
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfHover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul {
    	left: auto;
    	}
    
    #nav li:hover, #nav li.sfHover {
    	position: static;
    	}
    
    #nav li.right {
    	float: right;
    	margin: 0;
    	padding: 13px 25px 12px 0;
    	}
    
    #nav li.right a {
    	display: inline;
    	margin: 0;
    	padding: 0;
    	border: none;
    	background: none;
    	color: #EEEEEE;
    	font-weight: normal;
    	text-decoration: none;
    	}
    
    #nav li.right a:hover {
    	color: #EEEEEE;
    	text-decoration: underline;
    	text-shadow: #000000 1px 1px;
    	}
    
    #nav li.date {
    	}
    
    #nav li.rss a {
    	background: url(images/rss.png) no-repeat left center;
    	margin: 0 0 0 10px;
    	padding: 3px 0 3px 18px;
    	}
    
    #nav li.search {
    	padding: 0 10px 0 10px;
    	}
    
    #nav li.twitter a {
    	background: url(images/twitter-nav.png) no-repeat left center;
    	padding: 3px 0 1px 20px;
    	}
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Center or justify my top navigation bar’ is closed to new replies.