I'm creating a small project and got stuck on the following:

Im using the module Menu_block to create my navigation menu second level. What i need is a different background for each second level. (Not every link needs a different background, but the compleet block.) Menu_block creates one block for all the second level items.

Now is there a way to make the one block into seven (i got seven menu links) blocks or is there an other way i could do this?

For a layout of the website see the following link: https://www.dropbox.com/s/p5nr0zm3r2eatbw/layout%20website.PNG The number 1 or 2 background is what I want to change according to the current active navigatie level 1 link.

  • What is the purpose? Is it to create a rectangle of colour around each menu item (a different colour for each)? Or is it something else?
    – rooby
    Apr 24, 2013 at 13:32
  • Hi again, the purpose of this is to change the background image of the second level blok in function of the first level active link (if this isnt clear please say so, english isnt my native language) Apr 24, 2013 at 15:27
  • Dont know if you need to know this: the second level block is in a different region, its a different block made by the Menu_block module Apr 24, 2013 at 15:34
  • I believe I understand the question now.
    – rooby
    Apr 24, 2013 at 23:53

2 Answers 2


Different colour second level menu items

I would not use a block for each menu item even if you could.

The menu items should have classes with their mlid (menu link id), which is unique to the menu item.

You can add different colours with css based on those classes.

Different colour second level menus based on active path

Now that I understand your question you want the whole second level menu block to be coloured based on the currently active top level menu item.

In this scenario I think it is more acceptable to have a second level menu block for each parent menu item, so that is one solution, in which case you can easily style the blocks differently as they have different block IDs.

An alternative solution, is to add a single second level menu block for your main menu, and then add this code to your theme's template.php file:

 * Override or insert variables into the menu block wrapper template.
function THEME_NAME_preprocess_menu_block_wrapper(&$variables) {
  $active_trail = menu_get_active_trail();
  foreach ($active_trail as $item) {
    if ((!(bool) ($item['type'] & MENU_IS_LOCAL_TASK)) && !empty($item['mlid'])) {
      $variables['classes_array'][] = 'active-top-level-mlid-' . $item['mlid'];

That code will add a class to the block like active-top-level-mlid-405 - where 405 is the mlid of the active top level menu item.

You can then theme the block using this class.

  • Hi, Thx for the fast reply. Can you change the blocks background according to the mlid? (sorry im still pretty new to this) Or am I misunderstanding this completly... Apr 24, 2013 at 12:46
  • You could do it with javascript/jQuery, however that would colour the whole block, behind all the menu items, so you wouldn't get a colour per menu item if you colour the whole block. - Unless you have an item per block, as per your original request.
    – rooby
    Apr 24, 2013 at 13:32
  • Now that I understand your question, I have updated my answer.
    – rooby
    Apr 25, 2013 at 1:06
  • Hi rooby, thank you, thank you, thank you this is exactly what i needed. You helped me alot! Apr 25, 2013 at 7:11

The block should have a id which is unique for that specific block. You can use that as a css selector and change the block background.

For example: <div id="block-nice-menus-1" class="block block-nice-menus contextual-links-region block-1 block-nice-menus-1 odd block-without-title">

You could use #block-nice-menus-1 as your css selector to change the block background.

You could also then style children elements just for that block like this:

#block-nice-menus-1 li a {}

Hope this helps.

  • Hi, thx for the anwser but i dont think this is what i'm looking for. I need to change the background coler of the second level block and not of the second level links. But thx anyway, any help is usefull Apr 24, 2013 at 15:30
  • 1
    Drupal adds body classes for each page you are viewing. So if you want the same block different colors depending on which page you are viewing.
    – julianlab
    Apr 24, 2013 at 15:45
  • Hi, does that still works if they all need to be able to change on the front page? The second level block is displayed in a different region as the first, and that region is visable on al pages IF one of the second level menus has to be displayed (if one of the first level links is active). Apr 24, 2013 at 16:05
  • Could you provide me a like a really rough mockup of how you want this to look so I can get a better idea?
    – julianlab
    Apr 24, 2013 at 16:12
  • Hi, i have made a website layout, you can find it with this link:dropbox.com/s/p5nr0zm3r2eatbw/layout%20website.PNG What I'm trying to do is make it so the background image of eather 1 or 2 (on the layout) changes when i click on a different navigation menu link. If it still isnt clear please tell me what it is you dont understand and ill try to explain it. Thx for taking the time to help :) Apr 24, 2013 at 17:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.