Setting active status on a nav item while using Linked Components

Bootstrap Studio Help
1

Ok so I need to pick some brains here, cuz mine is picked clean haha!

I'm using Smartmenu in case anyone is familiar with it. More bells and whistles available than the default menu has in Bootstrap. I'm using Linked components to keep my menu items the same of course, which is the only way you can possibly do it with sites that will have more than 10 pages lol. This one I'm working on will probably have 30 to 50 pages by the time I'm done which is too much hassle to have to update them each separately just to use an active state link color, so ....

Anyone have any suggestions on how to get an active state color "per page" when you are using Linked Components for it? I'm just not coming up with any way, and it really would be nice to have that done on the menus. Small sites are easy, not too much hassle to update each page and most sites don't change the menu all that much either, but this one .... yeah it has to be not only a large site, but also will change their menu quite often I'm pretty sure.

Any suggestions or knowledge on how to get around this would be extremely appreciated. Thanks!

2

If you don't want to have to unlink your components you will need to use JavaScript - try this link to get you started http://stackoverflow.com/questions/25255891/add-active-class-dynamically-to-bootstrap-menu-and-opening-its-page

3

Do you mean in the app or just in the site in general such as when exported?

It depends on what it is you're wanting to all happen.

If it's just a CSS coloring thing etc.. and not an actual active class change then you can add a class to each pages BODY element to represent that page and then on the Nav for the Nav heading add a class to represent that as well then you can do something like this in the CSS.

.nav-heading-represented-class1,
.nav-heading-represented-class2,
.nav-heading-represented-class3,
.nav-heading-represented-class4 { //default coloring
    background-color:white;
}

.body-represented-class-spring .nav-heading-represented-class1 { //active coloring
    background-color:green;
}

.body-represented-class-winter .nav-heading-represented-class2 { //active coloring
    background-color:blue;
}

.body-represented-class-fall .nav-heading-represented-class3 { //active coloring
    background-color:brown;
}

.body-represented-class-summer .nav-heading-represented-class4 { //active coloring
    background-color:yellow;
}

As you can tell it's just a simple override method based on the unique page that you are on.

If you need an actual active class change then you'd need to do some scripting, similar to above about declaring the page you're on then testing with the script on if you need to remove the active state from one menu nav heading to the next. I'd need more time to think of something like that.

Saj

4

Thanks Chris, I'll take a look at that and see what it's all about.

@Saj: yeah it's an active setting I need so that the particular link on the menu is in a different color when that page is active, so I think it needs to be within the nav somehow, but of course it's not possible to do it in the code since it's Linked.

5

Inside the app it's just not going to do what I think your looking for because your using a Link Component Nav. Anything you set as active will be that on all pages.

This might be something that you can use when you export though.

$(function(){
    $(".navbar li").removeClass("active");
    var $bodyID = $("body").attr("id");
    $(".navbar").find("."+$bodyID).parent("li").addClass("active");
    $(".navbar").find("."+$bodyID).parents(".dropdown").children(".dropdown-toggle").trigger("click");
});

Similar to what I said in previous post. To each page Body add an ID representing that page then for the links in your Nav add a class of that page same as the ID for that page.

The script will execute on page load, it will remove the active class from the Nav and then check what the Body ID for that page is and then find it in the Nav and set it's parent LI to be active. Works with dropdowns too. In fact I just added the last line that will actually expose the dropdown if you are on one of it's submenu pages. If that's something you needed. :)

Saj

6

Thanks Saj, I'll put that in my snippets to check out later too. Am truly hoping that something can be added to the app later to work around this. We discussed it a while ago, but I don't remember what was all said on if it is something they may add so I'll search for the post later. Appreciate the attempts guys. Thanks!

7

Your welcome, just wanted to let you know that in a mobile view, the dropdown gets closed by the hamburger menu on click function. This is all based on the Navbar component from the app. I'm not sure what kind of changes might need to be made for a differently built nav section.

Saj

8

Good point, I'll keep that in mind as well since it's using Smartmenu rather than the built in nav in Bootstrap.

9

Thanks to @Saj for the useful workaround.

This is my slight addition for colouring dropdowns:

body.servicespage li.dropdown.serviceslink .dropdown-toggle { color: #fff; }