Active Nav Items

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!

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”)

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) {
    if (target.parentElement.classList.contains('dropdown-menu')) {

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

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

1 Like

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

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

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.

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

1 Like