Smart Active State incorrectly marks drop-down menu item as "active"

I have just started using Bootstrap Studio. I am creating a website based on the Clean Sky prototype, and have added a drop-down item ("Documentation") to the navbar.

When I am on the Home page, the "Home" nav-item is marked as "active" (as expected), but the "Documentation" nav-item is also marked as active. When I am on one of the other pages, only that page's nav-item is marked as "active" (not the "Documentation" nav-item).

Here is the relevant portion of the html:


Does this look like a bug in Smart Active State, or am I doing something wrong?


Well that's annoying, the link to the screen shot didn't make it in to the post. I'll try again.

screen shot

screen shot

Its not a bug but rather a limitation as to what the smart active script is looking for.

You could use this instead. (Turn smart active off and set active default)

$(function() { var pgurl = window.location.href.substr(window.location.href .lastIndexOf("/") + 1); $(".navbar a").each(function() { if ($(this).attr("href") == pgurl || $(this).attr("href") == '')<br /> $(this).addClass("navlink-active"); $('.navlink-active').closest('li').addClass('navitem-active');<br /> }) });

Thanks, I'll give that a try.

Before you go editing all the scripts or using others, you may want to do a search on the forums here as it's been covered a few times and there's a specific way it needs to be activated in order for it to work correctly. I don't know what that is as I use 3rd party navigations, but I don't recall it being all too difficult to set up.

I have read through all forum posts concerning Smart Active State, and none of them seem to apply to my case (where the nav-item has no href because it is a dropdown-toggle).

The problem addressed in the other forum posts seems to have to do with nav-items that had been manually marked "active" before turning on Smart Active State. That does not apply in my case.

Thanks for your comment, though :).

Here is a link to a working example using the Clean example.

I made a small edit to the script to use it on the publishing Bootstrap Site feature (removed "+1")

$(function() { var pgurl = window.location.href.substr(window.location.href .lastIndexOf("/") ); $(".navbar a").each(function() { if ($(this).attr("href") == pgurl || $(this).attr("href") == '')<br /> $(this).addClass("navlink-active"); $('.navlink-active').closest('li').addClass('navitem-active');<br /> }) });

I look forward to seeing if someone can make Smart Active State work with a additional dropdown added to a Bootstrap menu.

Twinstream, thanks for the working example. I've been looking at it using Chrome's developer tools. I can't find where you added your javascript. I don't see a reference to a new js file, and I don't see your code in the one js file in "assets".

(I have a lot of experience with desktop and mobile development, but not with responsive web development, sorry.)

I really appreciate your help with this :).

I removed everything except the navbar and the js script (which was at the very end in the js file that was minified with the rest of all the other custom js before).

Have another look....

Great, I now have the desired behavior! I had to make a few changes to your js:

$(function() {
var page_url = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
$(".navbar a").each(function() {
    $(this).attr("href") != page_url && "" != $(this).attr("href") ||
}) });

I re-added the "+1", and changed it to add the class "active" to the link element.

When I was using Smart Active State, it was marking just the link element as "active". Your code was marking the link element as "navlink-active" and the list element as "navitem-active", but it wasn't causing the item to appear in bold text. By changing it to mark the link element as "active", it how bolds the text.

I don't understand the nuances here, but at least it is working now.

Thanks again for your help, I really appreciate it!