I am trying to create a centered main menu in my Omega sub-theme. I've looked at various CSS ideas, but can't get anything to work. Here's one very simple idea that seems like a great approach, but I can't seem to get it to work. Looking at the CSS in Firebug, I don't see any reason why it shouldn't. But I assume there is either some CSS in the framework that I need to override or that I have missed something, or need to use a new approach:
http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/
Here's what I have so far on my dev site. It may be changing, but should give people an idea of what I have:
Please note: I'm only trying to implement this for the narrow, normal and wide layouts. My mobile phone layout uses a very different main menu design. Right now I'm working on the narrow stylesheet, where I've overridden the global main menu styles. I haven't put together the default stylesheet, which is for my IE8 and older non-responsive layout.
Any suggestions?
Comments
Interesting technique
That's a good technique to know about. To get it working in your situation, you should add "display: block" to the #main-menu CSS.
ul needs to be a block...
In order for
text-align: centerto work, the item with that style needs to be a block-level element. Your code for the main menu ul element has the class "inline" attached to it, which setsdisplay: inline.Two possible fixes:
#main-menu { display: block; }Hope that helps.
Thanks!
Well that was a simple fix! Thank you both. All I needed to do was add the
#main-menu {display:block}style.The
ul.inlineandul.links.inlinefrom Omega was adding the#main-menu {display:inline}style. I also hadn't realized it needed to have the block display.Thank you both. Turned a frustrating afternoon into a good one.
I do like the work by the fellow who posted the CSS for the centered menu. Just discovered his work He has some other resource sites that look very helpful as well:
http://csswizardry.com/resources/