[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 794
  • Last Modified:

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;
}
0
nanharbison
Asked:
nanharbison
  • 16
  • 14
1 Solution
 
Kyle HamiltonData ScientistCommented:
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

0
 
nanharbisonAuthor Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
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.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
nanharbisonAuthor Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
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)
0
 
nanharbisonAuthor Commented:
Thanks for your help. I have to stay within the Drupal webcode. Maybe I should ask this on the Drupal community pages.
0
 
nanharbisonAuthor Commented:
I have gotten the menu centered, but I still need the top level links centered while the drop downs stay left centered.
0
 
Kyle HamiltonData ScientistCommented:
I thought you said this worked?

#main-menu > a {
   text-align: center;
}
0
 
nanharbisonAuthor Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
can you post alink to your latest page?
0
 
nanharbisonAuthor Commented:
It's on the same page:
http://www.harbisondevelopment.info/
0
 
Kyle HamiltonData ScientistCommented:
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.
0
 
nanharbisonAuthor Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
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;
}
0
 
nanharbisonAuthor Commented:
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.
0
 
nanharbisonAuthor Commented:
Oh wait, I found it on the nice menus CSS, can I move it to the end of local.css?
0
 
Kyle HamiltonData ScientistCommented:
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.
0
 
nanharbisonAuthor Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
did you add that rule at the end of your stylesheet? Is it working? Is it up so I can have a look?
0
 
nanharbisonAuthor Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
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;
}
0
 
nanharbisonAuthor Commented:
it is there, the last line! I had forgotten to remove the version without the >, but this was the last line too.
0
 
Kyle HamiltonData ScientistCommented:
it's not seeing it. try this:

ul.nice-menu > li > a {
  text-align:center;
}
0
 
nanharbisonAuthor Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
you may need !important.

ul.nice-menu > li > a {
  text-align:center !important;
}
0
 
Kyle HamiltonData ScientistCommented:
The contact tab is getting its centered-ness from the fusion-style.css

It may take a couple of tries but we'll get there. There are a lot of conflicting styles on this page.
0
 
nanharbisonAuthor Commented:
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.
0
 
nanharbisonAuthor Commented:
This was a grueling task to accomplish, thanks so much to kozaiwaniec.
0
 
Kyle HamiltonData ScientistCommented:
:))
0
 
nanharbisonAuthor Commented:
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).
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 16
  • 14
Tackle projects and never again get stuck behind a technical roadblock.
Join Now