Link to home
Start Free TrialLog in
Avatar of nanharbison
nanharbisonFlag for United States of America

asked on

Center the whole main menu, plus center Parent Menu links, left justify drop downs.

Here is the website:http://www.harbisondevelopment.info

CSS on Superfish dropdown menus are so hard. First, I have tried centering the whole main menu because the menus don't go all the way across the page so they are not underneath the centered header. For now, I have added a left margin to make it look centered and set a smaller width than it defaults to, but this won't work if the menu items change. I am not sure which of these is changing the width, I added the width to both. This doesn't work on centering the menu.

#main-menu-wrapper {
	margin:auto;
	width:1010px;
	margin-left:115px;
}
#block-nice_menus-1 {
	width:1010px;
}
Then I need to have the main links (showing in red borders for now, I will be removing the red borders when I figure out how to center the links. Somehow the last link is centered, I can't figure out why. I have tried all kinds of brute force, crazy things, like this below, and they don't work. I tried putting a after some of the classes. Of course this won't work either if menu items change.

li.menu-218 a, li.menu-482 a, li.menu-483 a, li.menu-485, li.menu-486, li.menu-487, li.menu-488, .menu-path-front,  .menu-path-node-2, .menu-path-node-3, .menu-path-node-4, .menu-path-node-5, .menu-path-node-6,.menu-path-node-7 {
	text-align:center;
}
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

this is causing your menu bar to not be centered.
lbd.responsive.grid.css, line 43
body, div.full-width {
min-width: 1200px;
}

Open in new window

You can either remove the above or overrride it here:
local.css line 26
#main-menu-wrapper {
margin: auto;
width: 1010px;
margin-left: 115px;
min-width: 1010px;
}

Open in new window


The alignment of the individual links is here:
nice_menus_default.css, line 140
ul.nice-menu-down .menuparent a {
text-align: left;
}

Open in new window

You can remove it or override it in local.css on line 76
.region-main-menu ul li a, .region-main-menu ul li .nolink {
display: block;
text-decoration: none;
margin: auto;
width: 120px;
padding-left: 7px;
padding-right: 7px;
background-color: black;
border-color: black;
color: #D9CC90;
border-color: black;
letter-spacing: 4px;
font-size: 12px;
border: thin;
border-style: solid;
text-align: center;
}

Open in new window

If you want to keep the submenu items left eligned you can do this instead (only target top level anchors):
ul.nice-menu-down .menuparent > a {
text-align: center;
}

Open in new window

Avatar of nanharbison

ASKER

On the centering of the whole menu - I don't want to change the width of the main-menu-wrapper, mani-menu, main-menu-inner or block-nice_menu-1 divs, I would like to just center what is actually showing. I have all of these in my code right now, I took off the margin-left to try and do this correctly:

#main-menu-wrapper {
      width:1010px;
      margin:auto;
}
#main-menu-inner{
      margin:auto;
}
#main-menu {
      margin:auto;
}
#block-nice_menus-1 {
      width:1010px;
      margin:auto;
}

But since these are the full width of the page, it seems like #nice-menu-1 that should be able to be centered on the page but it doesn't work.

I added this:

ul.nice-menu-down .menuparent > a {
text-align: center;
}
                                           
but that centers the drop downs that then drop down too.
There are way too many classes and wrappers in this whole thing, which makes it very difficult to manage.

however, you could add the center alignment to:

#main-menu > a {
   text-align: center;
}
this should now target only the first level of anchors. (I had incorrectly assumed .menuparent was the top level menu only)

as to the width of the whole menu container, you already had it set at 1010px in #main-menu-wrapper in local.css line 26. The only thing I did is override the min-width of 1200px; In order to use margin:auto, you need a width.

The bottom line is, this menu is a royal mess, and should be simplified. To center it without using a specified width, it has to be done differently from the ground up.
The bottom line is, this menu is a royal mess, and should be simplified. To center it without using a specified width, it has to be done differently from the ground up.

My thoughts exactly and I DREAD having to make changes to the nice menus in Drupal, but I have no control over this, it's built in to Drupal.

This worked, thanks:
#main-menu > a {
   text-align: center;
}

Do I need a width AND a min width? I took out the width since I would like this to work without resetting it.
you need a width to be able to use margin:auto, which centers the container.

The min-width is in there in order to override the min-width which is getting inherited from another element.

You can probably get rid of the width, and just use min-width.

The way to center the whole menu without setting a width, is to use display:inline, instead of float:left. But this is an oversimplification. If building this menu from scratch it would be trivial, but to try and edit the drupal spaghetti (sp?) is a whole 'nother story...


Here's a centered menu without width constraints. The arrows are made with javascript, so that only items that have submenus display arrows. this is optional - the menu itself does not rely on javascript.

http://candpgeneration.com/EE/centered-menu.html

(view source for code)
Thanks for your help. I have to stay within the Drupal webcode. Maybe I should ask this on the Drupal community pages.
I have gotten the menu centered, but I still need the top level links centered while the drop downs stay left centered.
I thought you said this worked?

#main-menu > a {
   text-align: center;
}
That's right, I actually forgot it was. Now it's not, and that line is still in the CSS file called local.css. I don't know what happened.
can you post alink to your latest page?
make sure the center alignment rule comes after the left align rule in the css so that it can overwrite the left alignment. (if you put it in the other order, the elft alignment will override the center alignment on the top items)


ul.nice-menu-down .menuparent a {
  text-align: left;
}
ul.nice-menu > a {
   text-align: center;
}

this should align the first level items center, and everything else to the left.
That doesn't work. I cleared the caches multiple times and refreshed the page multiple times, but it's not centered, except the Contact link, which has been centered, which must be because it doesn't have any drop downs.
You're not following directions :)

on line 32, remove the align:center:
ul.nice-menu a {
  padding: 0.3em 5px 0.3em 5px;
  /* text-align:center; */
}


Then, after this on line 140:

ul.nice-menu-down .menuparent a {
   /* padding-right: 15px;LTR
   padding:8px;*/
   text-align:left;
}

insert this (you need to keep the greater-than symbol):

ul.nice-menu > a {
  text-align:center;
}
Can you tell me which file this is? I make all changes to CSS on the local.css, so if there is an update to the nice menus module or the theme I am using, it won't affect the CSS.
Sorry, I didn't say that before.
Oh wait, I found it on the nice menus CSS, can I move it to the end of local.css?
if you are duplicating styles to overwrite them, you need to put your overwrites After the default styles. And you may need to use the !important keyword. So your local.css stylesheet has to come after the default nice menu style sheet. But beware of making too many http requests by including too many separate stylesheets. It can really slow down your site.
The one I create automatically is added as the last style sheet. And once I get this blasted thing working, I can aggregate all the styles with the click of a button.
did you add that rule at the end of your stylesheet? Is it working? Is it up so I can have a look?
I added this to local.css:
ul.nice-menu a {
  padding: 0.3em 5px 0.3em 5px;
  /* text-align:center; */
}

But don't I have to override the text-align:center with something else, or the style will still hold?
This is still on the same page.
Like I keep pointing out - you need the > symbol to target only the top level items:

Put this at the end of your stylesheet:

ul.nice-menu > a {
  text-align:center;
}
it is there, the last line! I had forgotten to remove the version without the >, but this was the last line too.
it's not seeing it. try this:

ul.nice-menu > li > a {
  text-align:center;
}
I doesn't see that either, it is using:

ul.nice-menu-down .menuparent a {
text-align: left;
}

on local.css. I think I have come to realize that as soon as one of the main menu items has a drop down added to it, it becomes a menuparent, which is why CONTACT is centered, it IS seeing the correct rule.
you may need !important.

ul.nice-menu > li > a {
  text-align:center !important;
}
ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
OMG!!!!!!!!!! That did it!!!!!!!!!!!!! Thank you so much for sticking with this, and dealing with my incompetence. I wish I could give you WAY more points.
Thank you thank you thank you. I have been banging my head on this for 10 days.
Phew.
This was a grueling task to accomplish, thanks so much to kozaiwaniec.
I should add that I have never before done a custom Drupal website theme before, so this is a first. You would be a pro at this. I used Fusion Starter as the base theme ( you have to start with something).