Nav "active" status

This might be working as intended, but just in case I am gonna put it here.

I’ve wondered for a while why a nav item that has “#” in it, or nothing, always shows up as “active” and there’s no way to remove the “active” status, it’s locked in. If I put an actual link in it then it works as it should and the active status goes away, but if I take it out it’s always “active” which means the nav looks goofy with multiple highlighted nav items.

Just wondering if it’s supposed to do that as it doesn’t seem like it should be.

Hope you had a wonderful Thanksgiving if you celebrate it!

Ya that shows up but it’s not activated there so it can’t be turned off. I’ve tried turning it on then back off but that doesn’t affect it at all.

If the navbar has smart active state enabled all links that point to the page will be active, Don’t use that on a one page website

You can turn it of in the options on the actual nav item. If it’s a linked nav then you have to unlink the nav on each page then go through each page and add the active option for each page.


Let me be a bit clearer here. I have already been through all of those settings and all the “settings” say it is off, but when you look at the HTML it is active and the color is changed in the nav item as if it were active. There is “No” place to turn this off. Here’ Let me show you:

After I made that reply, I’m thinking … is it like this on export too? I will check that either later or tomorrow as it’s time to make dinner.

Had it open and decided to just do it first lol, and the results are … the same on export so it’s still not right. I was hoping it was just a preview issue … darn LOL

Já aconteceu comigo, precisei desativar toda os itens do menu, salvar, fechar o BSS, reabrir e ativar um a um, mesmo assim teve uns que reativaram, refiz o processo e funcionou.
Também precisei acertar o destino de todos os links.

Yeah I tried that too @gilmar but that didn’t work for me. The only thing that fixes it is if I put a link in it (which isn’t ready to be there yet), or I take out the hash tag #, but then there is no link and there needs to be soon.

It’s just not right, if it’s off in all the settings it shouldn’t be on in the HTML, and visa versa.

I don’t think it’s supposed to do this, doesn’t make any sense that it would, at least not to me.

I’m pretty sure you have the smart active state enabled on your navbar. Highlight your navbar and look at the last option in the navbar options. If the snart active state is enabled then you will not be able deactivate or activate your hash tags links. disable the smart active state on the navbar and you can activate or deactivate your hash tags links as you wish

Sorry I totally missed your response @kuligaposten.

I’m not sure I understand what you mean. I can turn off smart active state and nothing is on in it. There’s nothing to turn off they are all off already.
When I turn it back on, anything with a hashtag in the Link component’s URL becomes active in the HTML only. According to all other settings they are off. Am I missing something in what you said?

My main point here is that they should not be shown ON in the HTML since they are OFF everywhere else. Makes no sense.

Hi Jo-r, did you solve this problem as I am experiencing it too now.

To add to this, by using inspect in Google Chrome I can see that the first nav-link is “nav-link active” even though in BSS it is not active and in the BSS HTML panel it shows just as “nav-link”.

I believe this started when I switched on Active once and then switched it off. However, this now affects ANY bootstrap document I open in BSS, so I think it has created a problem within the programme itself.

I have reset BSS studio following instructions on the BS website, but this did not change anything.

Hmm it’s all working for me now, this was a year ago and I don’t recall what I did to fix it or if it just fixed itself.

At this point what I do is use the built in Navbar component in the Page section of the components. I then just turn on the Active state of the menu in the options tab for it and that’s it. Haven’t had to do anything more and it works as it should.

@jo-r Do you mean Smart Active State? Because that’s what I use on all my navbars. Great little feature!

@GrizzlyHippo All the pre-built Navbars in BSS start out with the first Nav Item set to Active in the Options panel > Nav Item Options. You have to select the Nav Item in the Overview panel, then go to the Options panel > Nav Item Options, and deselect “Active.”

That is what I do when building a new site. Then I create my Navbar Items & Links, create my pages, assign the Nav Item Links to their respective pages, and then go into the Options panel > Navbar Options and turn on Smart Active State. This will automatically apply the active class to the Nav Item Links when the pages are opened. With Smart Active State turned on, you should see that the corresponding Nav Item is in its active state in the Navbar, and you should see something like this in the HTML…

<li class="nav-item">
  <a class="nav-link active href="yourpage.html">Your Page</a>

(Interesting screen name, btw. Not sure I’d want to meet a Grizzly Hippo! :laughing:)

As I was playing around with the Navbar and the Dropdown tonight, something occurred to me…

When you add a Dropdown to the Navbar, if you go to the Options panel, and select the Link in the Dropdown, you are presented with the standard Nav Item Link Options, which allows you to enter a URL.

Of course, if you do enter a URL, clicking the Dropdown Link doesn’t take you to that URL, it opens the Dropdown menu - which is the expected behavior.

So I started thinking, “why does the Dropdown Link have an Option for a URL since it can’t take you anyplace?”

Then it occurred to me… when you Open the Dropdown using the Open button in the top menu, the Dropdown Link has the .show > .nav-link class added, which changes the color to the active color. The same thing also happens when you click the Dropdown Link on a website…

.navbar-nav, .navbar-nav .show > .nav-link {
  color: var(--bs-navbar-active-color);

So my thinking is that the only reason to have an option to add a URL to the Dropdown Link would be so if the Dropdown does take you to a page, the Dropdown Link would change to the active color and stay like that while you’re on that page, the same as the other Nav Links do when you are using BSS’s Smart Active State.

Does this make sense? If so, it would seem like it’s maybe something the devs overlooked. If not, then I can’t see any reason to have a URL option for the Dropdown Link.



printninja, thank you so much. Unfortunately nothing is solving this problem for me. But bare with me a couple of days and I’ll upload a test site and send you the link so you can see my problem.

I’ve got another question about carousels I’m about to post… so see you in that thread?!?

Oh yeh, GrizzlyHippo is an age old mash up of a nickname and a favourite cuddly toy!!! But I’m far too old to admit that… :wink:

Hi printninja, I have now uploaded our site and you can see that the ‘about’ nav link is stuck on active. This is the same on full nav and drop down menu. Can you help me edit the html to stop ‘about’ always being active?

Thanks, Grizzly.

Unfortunately, there’s nothing I can do to help you fix this just by looking at your website (or the code.) I can see the .nav-active class in your HTML, but the fix is not to edit the HTML. The problem is in how you’ve built the site (something you’ve done incorrectly in Bootstrap Studio.)

I’ll PM you a dropbox link and if you send me your .bsdesign file, and I’ll take a look at it for you.