Center main menu (and spread out) in Delicacy

  • blondecroatian · Member ·

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

  • blondecroatian · Member ·

    No one? :(

  • designsimply · Member ·

    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.

  • The topic ‘Center main menu (and spread out) in Delicacy’ is closed to new replies.