Trying to center navigation bar (Reddle theme)

• 

  wanderingrelentless1 · Member · Jan 28, 2014 at 6:14 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  hfzrhmn · Member · Jan 29, 2014 at 12:36 am

  • Copy link

  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

• 

  kathrynwp · Staff · Jan 29, 2014 at 6:03 pm

  • Copy link

  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