Hello,
Working with this theme, I'm seeing that my active link in the main menu is not appearing active/highlighted. My Drupal output looks like this:

<li class=""><a href="/" class="active">Home</a></li>

Twitter Bootstrap wants to highlight menu items that look like this:

<li class="active"><a href="/" class="">Home</a></li>
or:
<li class="active"><a href="/" class="active">Home</a></li>

I'm looking into menu.inc to make revisions for this. Is anyone else having this issue? I'm creating a sub-theme and haven't tested with the main Twitter Bootstrap them yet.

Thanks for your feedback in advance.

Comments

8w_gremlin’s picture

I have this issue as well.

Also the dropdown functionality is not working for me at the moment.

not sure why by bootstrap.js is throwing an Error; Uncaught TypeError: Object #

has no method 'on' line 147 /* ALERT DATA-API * ============== */ $(function () { $('body').on('click.alert.data-api', dismiss, Alert.prototype.close) }) could these all be related?
heddn’s picture

1richards’s picture

I have this issue as well and have done a lot of searching on the topic and haven't found a good solution. It seems like there are other cases where people have tried to add active class to the li element with no luck. Might not be specific to the Twitter Bootstrap theme.

excessorize’s picture

I stumbled upon this looking to add class attributes to menu items. Upon fixing what I believe to be a bug in theme.inc, the menu items started showing as active and hidden/forgotten functionality came through. Here's my diff:

188a189
>           $link['attributes'] = array_merge($link['attributes'], $attributes);
190,191c191,193
< 	  $class = (count($children) > 0) ? 'dropdown' : NULL;
< 	  $output .= '<li' . drupal_attributes(array('class' => array($class))) . '>';
---
>           if(count($children) > 0) 
>             $link['attributes']['class'][] = 'dropdown'; 
>           $output .= '<li' . drupal_attributes($attributes) . '>';

It looks like at line 190 someone added some code for the dropdown without noticing there were attributes (specifically classes) set above thus resetting/ignorning the code above. I'd throw this into a pull request, but I don't know how to do that on drupal.org.

Failing that, I used this patch on another install to verify that it alone will add the active functionality.

andregriffin’s picture

Status: Active » Fixed

Thanks excessorize. This has been committed to Dev.

Status: Fixed » Closed (fixed)

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

andregriffin’s picture

Project: Twitter's Bootstrap » Bootstrap
excessorize’s picture

So it looks like this got broken again. I've been hashing through the code and it appears that the "theme_bootstrap_links" routine is never being called - thus my patch above has no effect. Can someone confirm this?

I'm guessing this more agressive override was retired in favor of a more drupalistic approach - however we still are missing the "active" effect and function of the bootstrap framework.

excessorize’s picture

Okay, I found a new approach - here is a patch for menu.inc that will make it work:

62c62,67
<   
---
> 
>   // FIX menu items showing as "active"
>   if($element['#original_link']['in_active_trail']) {
>     $element['#attributes']['class'][] = 'active';
>   }
> 
liberatr’s picture

When I am setting the active menu item with Context module the active class gets added to the link, but not to the li above it.

I have added another check to the insanely long list of conditionals in bootstrap_menu_link in template.php

 if ((isset($element['#localized_options']['attributes']['class']) && in_array('active',$element['#localized_options']['attributes']['class'])) || ($element['#href'] == $_GET['q'] || ($element['#href'] == '<front>' && drupal_is_front_page())) && (empty($element['#localized_options']['language']) || $element['#localized_options']['language']->language == $language_url->language)) {
   $element['#attributes']['class'][] = 'active';
 } 
grinxols’s picture

Issue summary: View changes

Hi, I understand this is neither a Bootstrap or Context or Menu issue. There are simply some incompatibilities in these modules working together.

My workaround to this is by adding this code on my header.less file:

.navbar-default {
    .navbar-nav > .active-trail > a {
        &, &:hover, &:focus {
            color: @navbar-default-link-active-color;
            background-color: @navbar-default-link-active-bg;
        }
    }
}
.navbar-inverse {
    .navbar-nav > .active-trail > a {
        &, &:hover, &:focus {
            color: @navbar-inverse-link-active-color;
            background-color: @navbar-inverse-link-active-bg;
        }
    }
}

This code makes apply the same styles that are applied to "active" class to the "active-trail" class.
This works for me... Hope it helps :)

Bootstrap: 7.x-3.0
Context: 7.x-3.3