WordPress.com

1. blondecroatian
   Member
   Nov 26, 2012, 10:18 AM

   Hi,

   I have spent the last 2 hours trying everything to center my main menu bar in the Delicacy Theme I am using. Nothing is working...

   Right now, my menu maybe looks like it doesn't need centering because I have a lot of items in the menu, but I am about to delete one of the items from the menu, and the menu will then be geared left. Is there any way to evenly spread out and center the menu items in the navigation bar?

   The blog I need help with is tacklingmommyhood.com.

2. blondecroatian
   Member
   Dec 6, 2012, 4:06 PM

   No one? :(

3. designsimply
   Happiness Engineer
   Dec 27, 2012, 6:52 AM

   The menu in the Delicacy theme consists of several layers of CSS borders, background colors and gradients. You can center the menu using the following CSS, but it messes with the menu color gradients. Paste this into your Appearance → Custom Design → CSS editor and click the Preview button to see what I mean:

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

   This will work to update the colors back to something more reasonable. Note that I made the colors a little darker because I thought it looked better but you can adjust the color codes to your liking:

   #navigation {
   	background: #5E164D;
   	border-bottom: 1px solid #731b5f;
   }
   
   #navigation > .main-menu {
   	background-color: transparent;
   	background: -moz-linear-gradient(top,transparent 0%,rgba(0, 0, 0, 0.3) 100%);
   	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,transparent),color-stop(100%,rgba(0, 0, 0, 0.3)));
   	background-image: -webkit-linear-gradient(top,transparent 0%,rgba(0, 0, 0, 0.3) 100%);
   	background: -o-linear-gradient(top,transparent 0%,rgba(0, 0, 0, 0.3) 100%);
   	background: -ms-linear-gradient(top,transparent 0%,rgba(0, 0, 0, 0.3) 100%);
   	background: linear-gradient(to bottom,transparent 0%,rgba(0, 0, 0, 0.3) 100%);
   	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#731b5f',endColorstr='#5E164D',GradientType=0);
   	position: relative;
   }
   
   #navigation > .main-menu > ul {
   	background: none;
   	filter: none;
   }
   
   #navigation::before, #navigation::after {
   	background: none;
   	box-shadow: none;
   }

   Because of the complexity of the layers of stuff in that menu, you may need to do a bit more experimenting to get it looking how you want.

Topic Closed

This topic has been closed to new replies.