URGENT Centering menu items-Customized Delicacy Theme.

• 

  pinptest · Member · Mar 7, 2014 at 6:33 pm

  • Copy link
  • Add topic to favorites

  I just need to center the menu items. I don’t want the color changed or anything. Just the position. I found a few answers but none have worked or I end up with little “wings” in the middle of the page. PLEASE HELP!

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

• 

  timethief · Member · Mar 7, 2014 at 6:35 pm

  • Copy link

  There is no such thing as your issue being more urgent than the issues in threads that were posted before this one was posted. Please be patient while waiting for assistance.

• 

  pinptest · Member · Mar 7, 2014 at 6:38 pm

  • Copy link

  I am patient. However, I would like to get the sight published for my organization next week, it is a pressing issue. I will look forward to your astute guidance.

• 

  pinptest · Member · Mar 7, 2014 at 6:39 pm

  • Copy link

  Sorry site

• 

  timethief · Member · Mar 7, 2014 at 6:40 pm

  • Copy link

  I do not provide CSS editing help. I answer only general support forum questions.

• 

  pinptest · Member · Mar 7, 2014 at 6:43 pm

  • Copy link

  Thanks. I look forward to any answer you have. Do you have a better resource or someone that could provide guidance? Googling it hasn’t helped.

• 

  timethief · Member · Mar 7, 2014 at 6:47 pm

  • Copy link

  All CSS editing is theme specific editing.
  http://en.support.wordpress.com/custom-design/
  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
  http://en.support.wordpress.com/custom-design/editing-css/
  Staff provide support for CSS editing and some Volunteers do also.

• 

  designsimply · Member · Mar 12, 2014 at 1:32 am

  • Copy link

  Centering the menu items in the Delicacy theme is harder than it looks. Here are a couple examples I came up with:

  Example 1

  This is just for illustration so you can see what’s happening. Here is a basic example that will center the existing menu. As you can see, more work than this needs to be done:

  #navigation > .main-menu {
  	text-align: center;
  }
  
  #navigation > .main-menu > ul {
  	float: none;
  	width: auto;
  }

  Example 2

  If you wanted to try to keep as much of the gradient effect as possible, then this example may work. The ribbon edges won’t look exactly the same as they did before, but they’re close:

  #navigation {
  	background-color: #cc0934;
  }
  
  #navigation > .main-menu {
  	background-color: transparent;
  	background: -moz-linear-gradient( top, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.3 ) 100% );
  	background: -webkit-gradient( linear, left top, left bottom, color-stop( 0%, rgba( 0, 0, 0, 0 ) ), color-stop( 100%, rgba( 0, 0, 0, 0.3 ) ) );
  	background-image: -webkit-linear-gradient( top, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.3 ) 100% );
  	background: -o-linear-gradient( top, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.3 ) 100% );
  	background: -ms-linear-gradient( top, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.3 ) 100% );
  	background: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.3 ) 100% );
  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc0a39', endColorstr='#b50a2e', GradientType=0 );
  	text-align: center;
  }
  
  #navigation > .main-menu > ul {
  	background: none;
  	float: none;
  	width: auto;
  }
  
  #navigation .main-menu > ul:before,
  #navigation .main-menu > ul:after {
  	border-top: none;
  }

  Example 3

  This one is simpler, it replaces the main menu background with a solid color instead of a gradient:

  #navigation > .main-menu {
  	text-align: center;
  }
  
  #navigation > .main-menu > ul {
  	background: none;
  	float: none;
  	width: auto;
  }
  
  #navigation .main-menu > ul:before,
  #navigation .main-menu > ul:after {
  	border-top: none;
  }

  Try out each example in the live preview using the Appearance > Customize > CSS editor and pick the one you like best.