By nanharbison on

Hi All,

I have been slugging away at this for a week and I can't for the life of me figure out where to add the CSS to center the entire menu bar, or center the top level links in the main menu. This is D7 Fusion's starter theme. For now I have added a red border around the menu, so I can see what is happening.
It's here:
http://harbisondevelopment.info/

Thanks for any help!
Nan

~~banging head against wall~~

⋅ Categories: Drupal 7.x

Comments

mjonesdinero’s picture

mjonesdinero commented

#block-nice_menus-1 {
margin:auto;
width: 985px;
}

and

#main-menu {
margin: auto;
width: 1200px;
}

and

#main-menu-inner {
margin: auto;
width: 1010px;
}

Please look on this and what i have paste has already the right css values/attributes.. Just ask another questions if found an issue

nanharbison’s picture

nanharbison commented

I had to widen the #block-nice_menus-1 width to 1000px because it didn't fit across the screen and wrapped.
My next question is that I would like the main navigation items to be centered, somehow the Contact link is centered I guess because it doesn't have a drop down menu, but I can't get the other ones centered without centering the drop downs, which doesn't look good.
Thanks so much for helping me.

Fiable.biz’s picture

Fiable.biz commented

It's even simpler, without having to fix the width:

.block-nice-menus { /* Adaptation by Fiable.biz of http://drupal.org/node/99174 */
   float: left; position: relative; left: 50%;
}

.block-nice-menus ul { position: relative; left: -50%; }

Fiable.biz also commented out things:

ul.nice-menu-down {
  margin: 0 auto 1% auto;
  /*float: left; Commented out by Fiable.biz to center the menu. */
  border: 0;
  text-align: center; /* Added by Fiable.biz to center the menu items. */
}

And, to put the sub-menus items to the left:

ul.nice-menu-down ul li {
  text-align: left; /* Added by Fiable.biz for sub-menus items. */
  clear: both;
}

http://Fiable.biz Web site creation.

webatelier’s picture

webatelier commented

sadly,
this still gives an ugly horizontal scrollbar in the browser below ...