Active Nav Items

Bootstrap Studio Help
1

I’ve looked and I can’t find something that addresses this (or if I did see an answer, I didn’t recognize it). I have a linked Navbar and when I set Active status in index.html - it changes it for all pages except the ones for which I’m using a Dropdown. If I go and change another page, it changes it in index.html (and all other pages) as well.

What am I doing wrong?

Thank you!
Tami

2

Here is a example. It highlights both the nav-link and nav-item too.

Navbar Dropdown with highlighted select

You may want to read this post

forum post

The script is different for posting to BSS Publish vs Export and ftp. (“+ 0” vs “+ 1”)

3

You can make you own smartActive script like this
It highlights the dropdowns as well

const smartActive = () => {
  let url = location.pathname;
  let _smartActve = url.substring(url.lastIndexOf('/'));
  _smartActve = _smartActve.replace('/', '');
  if (_smartActve === '') _smartActve = 'index.html';
  const target = document.querySelector(`a[href="${_smartActve}"]`);
  if (target) {
    target.classList.add('active');
    if (target.parentElement.classList.contains('dropdown-menu')) {
      target.parentElement.parentElement.firstChild.classList.add('active');
    }
  }
};

document.addEventListener('readystatechange', smartActive, false);

The script works when preview or export, no need to change the script
Works without jQuery

1 Like
4

Thank you! I really appreciate the example! Happy New Year . . . Tami

5

Thank you! I really appreciate an example that will show me how it’s done correctly! Happy New Year . . . Tami

6

I recently posted a question about this EXACT thing because I was trying to understand why BSS provides a link in the dropdown, when adding a URL does nothing.

7

I would use kuligaposten script as it does not require jquery. You would then just style accordingly.

8
1 Like