Thank you so much for all of your assistance with customizing Voltata for limaproduction.com. Our navigation menu, under the page title, is not centered. I checked margins, and included text align center, but it is still off (seems left indented). Would you please assist with CSS to center with the rest of the page?

https://www.limaproduction.com/

Thank you again.
Kind regards
limaproduction

I am trying to center both the navigation bar and top menu on the Fashionistas template.

I am working on a child menu but can’t seem to locate where I need to make the changes to center them.

I have already centered my logo and just want everything to look perfect before my blog goes live.

Can anyone help??

Thank you in advance!

Site is www.jmarissa.com

Here is the css code I tried…Kept it on so you can see the problem!

#access ul {
    display: table;
    margin: 0 auto;
}

#site-logo {
    display: table;
    float: none;
    margin: 0 auto;
}

Via the screen.css I have tried the following:

#topmenu {
margin-left: auto;
margin-right: auto;
padding: 0;
}

As you will see this has not worked. Can anyone please advise how the menu navigation can be centered on the page?

Thanks!

I’m trying to center my nav bar on my site and am having no luck what-so-ever….

I am using the Clean Retina theme, but currently have a ‘Coming Soon’ page up, so can’t really share a link…

Here’s the section of code that shows when I inspect the menu:

<nav id="access" class="clearfix"><ul class="root l_tinynav1"><li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-27"><a href="https://www.traditionfoods.com/"> … </a></li><li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item menu-item-34"> … </li><li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"> … </li><li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"> … </li><li class="default-menu"> … </li></ul><select class="tinynav tinynav1"> … </select></nav>

Does this help?

Here’s the code (hope it’s not too long for this):

#nav {
	display: block;
	float: right;
	width: 924px;
	background-color: #410013;
	height: 40px;
	margin-right: 0px;
	margin-bottom: 0px;
	border-right-width: 8px;
	border-left-width: 8px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFF;
	border-left-color: #FFF;
	margin-left: 0px;
	}

#nav li {
	margin-right:25px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	font-size: 19px;
	color: #FFF;
	}

#nav li, #subnav li {
	float:left;
	list-style:none
	}

#nav a, #nav a:visited {
	color:#FFF;
	text-decoration:none;
	}

#nav a:hover, #nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#nav li.current_page_item a,
#nav li.current_page_item a:visited
        {
	color: #608b82;
	font-weight: bold;
	text-transform: uppercase;
	}
#subnav {
	display: block;
	float: right;
	width: 926px;
	background-color: #BEBCAD;
	height: auto;
	margin-right: -5px;
	margin-bottom: 0px;
	border-right-width: 10px;
	border-left-width: 10px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFF;
	border-left-color: #FFF;
	margin-left: 10px;
	padding-top: 8px;
	padding-bottom: 8px;
	}

#subnav li {
	color: #2b443f;
	line-height: 1px;
	margin-top: 8px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	}

#subnav a, #subnav a:visited {
	color:#2b443f;
	text-decoration:none;
	}

#subnav a:hover, #subnav a:active,
#subnav li.current_page_item a,
#subnav li.current_page_item a:visited {
	text-transform: uppercase;
	font-weight: bold;
	}