WordPress.org

Ready to get started?Download WordPress

Forums

Center or justify my top navigation bar (2 posts)

  1. Jjohns34
    Member
    Posted 1 year ago #

    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;
    	}
  2. Kevin Ashbridge
    Member
    Posted 1 year ago #

    Which browser are you using to look at your website? The Top Nav bar is centered for me using Firefox.

Topic Closed

This topic has been closed to new replies.

About this Topic