How to center my navigation bar/menu (frontier theme)

See https://www.w3.org/Style/Examples/007/center.en.html

To avoid setting a width on the menu try displaying it table.

E.g,

#menu-leg_menu {
 display: table;
 margin: 0 auto;
 /* Override the float */
 float: none;
}

Do you have a section of the dashboard to hold your CSS modifications?

I’ll try some of those techniques from the link you referenced, but doesn’t that only apply to text within an item or can it apply to the ‘ul’ as a whole also?

I’m not sure what you’re asking in the last question? Like a child theme?

@iantskon

I’ll try some of those techniques from the link you referenced, but doesn’t that only apply to text within an item or can it apply to the ‘ul’ as a whole also?

The code he posted above does exactly what you’re looking for. You may also want to add this to put it at the exact center.

#menu-main {padding-left: 0;}

..another thing the client wants, is for the menu items (li) to all have the same width, i.e., ‘Project Highlights’ being the longest item, all the other list items would be the same width.

.menu-main li a {min-width:120px;}

Of course you’ll have to change the min-width to match your longest item.

where would I go to adjust the widths of the submenu items to contain the entire length of the text on one line, rather than two as it is now.

#menu-main .sub-menu {width: 204px;}
#menu-main .sub-menu li a {width: 202px;}

I’m not sure what you’re asking in the last question? Like a child theme?

I can see that you’ve added your codes on the Custom CSS option so that’s ok.

Do you use firebug or any similar tool? Maybe this could help you answer most of your css questions. Edit theme css using firebug

**edit – I just saw the post above, I’ll get to work now trying those solutions, Thanks! ??

@ronangelo Woo! that worked out great, thanks a million ?? I just started learning CSS the other day and I’m loving how simple, yet powerful it is. Thank you both for the help!

@ronangelo I actually just discovered firebug today, is it anything like the “inspect element” feature in chrome?
Thanks,
Ian

@iantskon
Yup, it’s the same.
I noticed that you copied the entire blocks just to change the width like this:

#menu-main .sub-menu, #menu-main .children {
	width: 200px;
	background-color: #2b2b2b;
	border: 1px solid #000;
	position: absolute;
	z-index: 30;
	display: none;	/* initial hide */
	box-shadow: 0 1px 4px #000;
}

You can just use:

#menu-main .sub-menu, #menu-main .children {
	width: 200px;
}

The other attributes will still work even if you don’t declare them again. This will make it easier to track your exact modifications.

@ronangelo
Cool, yeah I’ve already been experimenting with the inspect element feature here as of late.
Thanks again for all the tips, and for the great theme!

Ciao,
Ian

After reviewing the code here, I am unable to identify `#menu-leg_menu {
display: table;
margin: 0 auto;
/* Override the float */
float: none;`
in my editor section of the theme. I have used firebug to identify the section as `#nav-main {
background-color: #2A5A8E;
border-bottom: 1px solid #000000;
float: left;
padding-left: 10px;
width: 100%;
z-index: 20;`
as the text to change, but everything I try fails to accomplish the centering task. I have tried float: none float: centre float:absolute to be honest I have no idea what I am doing. This has been thrust upon me and I am meddling through. Quite well until now. Any thoughts about what I might be doing wrong.

Try adding this to your custom CSS (I hope that’s what you are using so that your changes won’t be lost when the theme is updated):

#nav-main .nav-main {
    float: none;
    display: table;
    margin: 0 auto;
}

Thank you WPyogi. Certainly did the job.
The site is test.atgis.com.au I am trying to centre the menu items inside the nav bar whilst maintaining it at 100% so that the “gaps” are not at each end. Any ideas.
Cheers mate

Clear what you have now (save and set aside) and try this:

#nav-main {
background-color: #2A5A8E;
border-bottom: 1px solid #000;
float: left;
display: table;
margin: 0 auto;
position: relative;
z-index: 999;
width: 100%;
}

.nav-main {
border-left: 1px solid #023266;
border-right: 1px solid #4878AC;
margin: 0 auto;
display: table;
float: none;
}

you’re getting those “gaps” because you have the width on the #nav-main id set to 0 auto; and it needs to be 100% so get rid of the padding-left and padding-right and use what I have above and see how that works..

you’re almost there, change .nav-main {float: none;} instead of left and you got it.

You are doing all of your edits from the custom CSS option, right?

You actually don’t need all that extra stuff, just use what WPyogi has above and you should be all set.

Ian. You rock. That was perfect. Been banging away at that for ages now. I had been playing with the 100% width but kept formating the bar back to the left, which is as it turns out was to do with the .nav-main section. Didn’t even see that.
Again thank you.