[SOLVED] I need to add class to and of a menu.

By aersa on 6 Aug 2016 at 15:08 UTC

I added a menu simply by choosing Menu > Add menus from the Drupal interface and it's all working fine.

How can I add a class/id to the html tags so I can style said menu? I can see in my console, the html looks like this:

<div class="menu">
    <ul>
        <li>
        <li>
    </ul>
</div>

I would like to add the class "tabs" to the <div> and "nav" and "nav-tabs" to the <ul> but I can only find a module that adds attributes to the <li>'s !

Help please, also I don't know much about the template files I know are locatied somewhere in my 'themes' folder but is this somewhere to be found there so I can change it there directly?

Edit:
[SOLVED] - Here is my solution:

I have theme located under mydrupalsite/profiles and there I found the correct template.php file.

In the file I added the function:

function drupalexp_menu_tree__menu_fags_a_tabs($variables) {
	return '<div class="tabs"><ul class="nav nav-tabs">' . $variables['tree'] . '</ul></div>';
}

then cleared cache by doing Configuration>Performance>Clear Cache on my drupal site. Works like a charm now! I think before I either defined my function wrong or forgot to clear cache.

If you have a similar problem, exchange drupalexp out for the name of your theme and change menu_fags_a_tabs out for your menu machine name. My menu machine name was menu-fags-a-tabs.

Comments

You don't need to edit

John_B commented 6 August 2016 at 19:47

You don't need to edit templates if you use Menu Attributes module.

Digit Professionals specialising in Drupal, WordPress & CiviCRM support for publishers in non-profit and related sectors

Thank you for your reply! I'm

aersa commented 8 August 2016 at 09:28

Thank you for your reply! I'm sorry I didn't get back to you sooner.

I am familiar with the Menu Attributes module, however I couldn't see that would work for me because it allows me to specify for menu items, *not* the menu div container itself.

So, as I said above, I need to add classnames to the <div> and the <ul> but this module only allows me to add classnames to the <li> and the <a> (I don't need that).

I would suggest you look at

bovidiu commented 8 August 2016 at 09:42

I would suggest you look at the menu hook https://api.drupal.org/api/drupal/includes!menu.inc/function/theme_menu_link/7.x

Thank you for the reply. :)

aersa commented 8 August 2016 at 10:01

Thank you for the reply. :)

I came across something similar at .

I don't quite understand my theme situation (I'm improving a site someone else made and also new to drupal). I have something called Evolve which seems to depend on DrupalExp even though that's not an enabled theme but its' folders are included in my directory.

So in both the template.php for Evolve and DrupalExp (those are in my profiles-folder, for some reason) I tried to do like the link above says, to create:

evolve_menu_tree__mymenu() {
   // some code that changes the html
}

and

drupalexp_menu_tree__mymenu() {
    // some code that changes the html
}

These functions however are never triggered. If I put an echo in the top of those files, they are still echoed out so it's not that the files aren't used, it's just that my theme doesn't know to fire these functions when the menu is created.

I'm not supposed to edit menu.inc directly, right?

Your function definitions are

bovidiu commented 8 August 2016 at 10:13

Your function definitions are wrong, try to pass a parameter through the function, ie:

drupalexp_menu_tree__mymenu($variables) {
    // some code that changes the html
}

Using hook_menu_tree it's another solution, but then I suggest you read https://api.drupal.org/api/drupal/includes%21menu.inc/function/theme_men....

If you login into the CMS and go to `/admin/appearance` you can see which theme is activated.

Modifying menu.inc, it's not a solution, because on the next Drupal update, your change might be removes also, it's a bad practice to modify core files just to adjust a local functionality.

Yeah sorry, my definitions

aersa commented 8 August 2016 at 10:30

Yeah sorry, my definitions were wrong in my reply but not in my code. I have noticed in my drupalexp template.php file, there is a function called drupalexp_menu_local_tasks that I know is triggered whenever my menu is created. I tried to put the function in that same file as you have defined it but nothing happens.