Need help? Check out our Support site, then


Trying to center navigation bar (Reddle theme)

  1. kathleenberbec
    Member

    I've been trying unsuccessfully for hours to center my navigation links within my navigation bar. I've posted the code from the main stylesheet below as it pertains to my navbar (#access). I am using a child theme to make modifications.

    /* =Menu
    ----------------------------------------------- */
    
    #access {
    	background: #000;
    	clear: both;
    	display: block;
    	float: left;
    	margin: 0 auto 3.23em;
    	width: 100%;
    }
    #access ul {
    	list-style: none;
    	margin: 0;
    	padding-left: 0;
    }
    #access li {
    	float: left;
    	position: relative;
    }
    #access a {
    	color: #eee;
    	border-bottom: .375em solid #444;
    	display: block;
    	line-height: 3.23em;
    	margin: 0 1px 0 0;
    	padding: 0 28px;
    	text-decoration: none;
    }
    #access ul ul {
    	background: #b12930;
    	border-top: 1px solid #a41c23;
    	-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    	-moz-box-shadow:    0 3px 3px rgba(0, 0, 0, 0.2);
    	box-shadow:         0 3px 3px rgba(0, 0, 0, 0.2);
    	display: none;
    	float: left;
    	position: absolute;
    		top: 3.5em;
    		left: 0;
    	z-index: 99999;
    }
    #access ul ul ul {
    	left: 100%;
    	top: 0;
    }
    #access ul ul a {
    	border: none;
    	color: #ffe8ef;
    	margin: 0;
    	padding: 0 28px;
    	width: 200px;
    	height: auto;
    }
    #access ul ul li {
    	border-bottom: 1px solid #a41c23;
    }
    #access li:hover > a {
    	border-color: #b12930;
    	color: #fff;
    }
    #access ul ul :hover > a {
    	background: #ac242b;
    	color: #fff;
    }
    #access ul ul a:hover {
    }
    #access ul li:hover > ul {
    	display: block;
    }
    #access li.current_page_item a,
    #access li.current-menu-item a {
    	border-color: #b12930;
    }

    my blog is posted at kathleenberbec.com

    thank you for your help!!

    The blog I need help with is kathleenberbec.com.

  2. Hi there, as you are using a self-installed WordPress version, the correct place to ask around is the WordPress.org forum. Try here:

    http://wordpress.org/support/forum/themes-and-templates

  3. Hi Kathleen, your menu looks centered to me - kudos on figuring this out.

    This is the CSS I see that you used to centre the menu:

    /*centre navbar links*/
    
    #access {
    	overflow: hidden;
    	position: relative;
    }
    #access ul {
    	clear: left;
    	float: left;
    	position: relative;
    	left: 50%;
    }
    #access li {
    	right: 50%;
    }

    You can actually remove this line, which I omitted above:

    text-align: centre;

    It's not being applied because "centre" should be spelled "center" and it's not needed.

    As hfzrhmn mentioned, these forums are for WordPress.com sites, and your site is self-hosted on your own host. (The CSS above should work on WordPress.com sites, though.) If you need further help with the self-hosted version of Reddle, feel free to post in the Reddle forum over in the WordPress.org forums:

    http://wordpress.org/support/theme/reddle

Topic Closed

This topic has been closed to new replies.

About this Topic