Custom Twenty Eleven, verticaly & horizontaly center menu

• 

  eschmichael · Member · Jan 5, 2015 at 9:28 pm

  • Copy link
  • Add topic to favorites

  While customizing the twenty eleven theme I have been trying to center vertically and horizontally the menu without luck. I am looking for help with this. I have rendered what the theme menu currently looks like after my modifications, and am providing a snippet of my css and the rendered html.

  [img]http://i.imgur.com/FN2GEA8.png[/img]

  This is the css I modified from the origional twenty eleven:

  /* =Menu
  -------------------------------------------------------------- */
  
  #access {
  	background: url("./images/left-cross.png") repeat scroll 0% 0% #222;
  	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
  	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
  	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
  	clear: both;
  	display: block;
  	text-align: center;
  	margin: 0 auto 6px;
  	width: 100%;
  	height: 100px;
  	vertical-align: middle;
  	position: relative;
  }
  #access ul {
  	font-size: 13px;
  	list-style: none;
  	margin-top: auto;
  	margin-bottom: auto;
  	position: absolute;
  	margin-right: auto;
  	margin-left: auto;
  	display: inline-block;
  
  	width: 100%;
  }

  This is what the rendered html looks like:

  [img]http://i.imgur.com/dFCmlIm.png[/img]

  The blog I need help with is: (visible only to logged in users)

• 

  nizamilputra · Member · Jan 6, 2015 at 1:25 am

  • Copy link

  Hi there, I’m not sure it will helps you, because I can’t find your website online. But lets try with this css;

  #access ul{
    text-align: center;
  }
  #access li{
    float: none;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    *vertical-align: middle;
  }

• 

  eschmichael · Member · Jan 6, 2015 at 4:03 am

  • Copy link

  Hi, Thank you for trying to help me, I have tried the above code with some success. The menu now appears centered horizontally but not vertically. Unfortunately I did not create a child theme and started editing a copy of the theme I made on my local machine and thus do not have a live site to direct you to. I did however make a fiddle, but it does not apear to do the same thing as my site is doing.

  http://jsfiddle.net/eschmichael/h9jc72vv/1/

  This fiddle, while it contains the same css, and the resulting html from my firefox browser, it does not look anything like what is on the site.

  I this that this is very close and I will continue to investigate vertical alignment as I am learning vertical-align applys to inline and not block elements.

• 

  eschmichael · Member · Jan 6, 2015 at 4:21 am

  • Copy link

  Ok the update is I now have it working. I combined what you have created with http://stackoverflow.com/questions/12210673/middle-vertical-align-for-a-in-li-menu and produced the following css which achieves the result I wanted:

  http://i.imgur.com/DgTg8QG.pngResult

  #access {
  	background: url("./images/left-cross.png") repeat scroll 0% 0% #222;
  	clear: both;
  	display: block;
  	text-align: center;
  	margin: 0 auto 6px;
  	width: 100%;
  	height: 100px;
  
  }
  #access ul {
  	font-family: "Lato", sans-serif;
  	font-size: 20px;
  	letter-spacing: 2px;
  	list-style: none;
  	/*display: table-cell;*/
  	/*margin: 0 auto auto;
  	width: 100%;
  	height: 100px;*/
  
  }
  
  #access li {
  	float: none;
  	display: table-cell;
  	vertical-align: middle;
  	height: 100px;
  }