Linked component exception from syncing

Bootstrap Studio Help
1

I have noticed that in some templates provided with bootstrap studio the nav is a linked component, this is great and id like to have it that way as well. But normally all changes are synchronized between all instances of that component, so even which nav item is active. So if i want to change which menu item is active all other pages change. I do not understand how its done on the templates, since i would like to reproduce that.

2

In your navbar, make sure than no nav item is active

Then in options, turn on smart active state

image

3

Thanks a lot @richards , seems to work on navbar. Unfortunately i used nav so i will either have to rewrite it (which is gonna be a bit painful due to styles and stuff) or i have to figure out how to do that on nav.

4

You could do it using css. something like:

#about .about,
#home .home,
#services .services {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

then give the body on each page an id (home, about, services etc)

then each link in your nav add the relevant class

5

Add a navbar to the page and drop your nav onto the
Navbar Collapse in the navbar and delete the other nav in the navbar and you are done