I am running Drupal 6 with Nice Menus and customizing a Zen theme. As such, I would really like to define different background colors for each of the menu items across the screen, with a uniform color for the drop-down menu below the menu.

I am having a hard time coming up with the proper syntax for the CSS code to be able to accomplish this.

In my custom CSS file (as defined in under themes>global settings), there is this:

ul.nice-menu-down li.menuparent,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menuparent {
  background: #eee url(arrow-down.png) right center no-repeat;
}

But I cannot get the syntax right to name each .menuparent by its ID number.

Anybody have more knowledge than me on CSS?

Thanks!

CommentFileSizeAuthor
#3 NiceMenu_bg_issue.png16.84 KBOpsTao
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

michaelbstringer’s picture

michaelbstringer CreditAttribution: michaelbstringer commented
Title: Define background color for individual parent menu items » Define background color for individual parent nice menu items with CSS
Status: Active » Fixed

OK, I got it. In my custom menu CSS file that I renamed, moved, and then listed the path in my theme global settings, I added the following classes:


/* no change for this first element – it is just given to show where I placed this */

ul.nice-menu-down li.menuparent,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menuparent {
  background: #eee url(arrow-down.png) right center no-repeat;
}

/*  In firebug, I grabbed these menu-path-node-#’s for each of the links */

ul.nice-menu-down li.menu-path-node-47,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menu-path-node-47 {
background: orange;
}

ul.nice-menu-down li.menu-path-node-203,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menu-path-node-203 {
background: green;
}

ul.nice-menu-down li.menu-path-node-350,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menu-path-node-350 {
background: red;
}

The individual links are styled based on the node that they point to.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

OpsTao’s picture

OpsTao CreditAttribution: OpsTao commented
Version: 6.x-1.3 » 7.x-2.1
Component: CSS » Miscellaneous
Status: Closed (fixed) » Active
FileSize
NiceMenu_bg_issue.png16.84 KB

I have a similar problem as described above, but with a later version of Drupal and of the module and I can't duplicate the code pattern described. I don't need to separately recolor the background of each parent item. Also it has no dropdown menus for the parent items, because it uses "Menu Minipanels" instead. It is however similar in some ways, for example in Firebug I see numbers referring to the specific links such as "menu-693 menu-path-node-36" and such.

The page uses 2 Nice Menu blocks but I need to modify only one of them, a 3-parent-item menu sitting inside a region called "submenu" in the theme "MAYO." This region has been given a custom background color (a gold tone) via css, outside the recoloring options offered in the theme config. But the Nice Menus block seems to pick up the overall page background color (a light gray), not matter what I do. If I change the page background, that menu block follows the change even though the menu is positioned on top of this region's custom background color. It's as if the Nice Menus block is "knocking out" whatever is underneath, down to the page background. [SEE ATTACHED] I just want it to be transparent and thus show the region background, or else color it the same.

Suggestions?

MissStress’s picture

MissStress CreditAttribution: MissStress commented

Drupal 7 - tried the above but it didn't work.. I am by no means proficient in .css though.
Are there step by step instructions somewhere on how to change the parent menu item colours so each parent item has it's own specific colour? TIA! :)

OpsTao’s picture

OpsTao CreditAttribution: OpsTao commented
Issue summary: View changes

I have still not found a way to control the parent menu item's background color. In my site's case, the NiceMenu is in a custom region with a custom background color. But the NiceMenu parent item's bounding box always shows the page background color, not the region bg color as I would like it to do. It acts like the menu parent box(es) are cutting a window through to reveal the page background. Can anyone explain how this might be controlled as desired?