Marking Dropdowns as Active in Navbars

Webdesign Help
1

I have a client that has so many links I hate to even count lol. Anyways I’ve had to create a multilevel dropdown in order to accommodate them. Quite a feat if you ask me lol, but it’s finally working pretty nicely!

But … since almost every button on the main menu level is a dropdown, the Smart Active state is … well … lacking as it doesn’t see them as normal links to show as active with colors etc. Anyone know any ways (preferably not back end stuff) other than to code every single link for all almost 50 pages? Would really be awesome if the app had ways to do this, but since a multi level dropdown isn’t supported by bootstrap I won’t hold my breath on it and will hope someone can give some pointers here.

I know I can do it manually link by link, button by button … but yeah, has to be an easier way I’m just not seeing … I hope lol. Thanks for any help anyone can provide on this.

2

If your file structure is right then you could use some js to read the url and add a class depending on subfolder name.

something like:

if (window.location.href.indexOf("section-one") != -1) {
    
  var element = document.getElementById("navLink1");
  element.classList.add("active");
    
}
3

This will make all anchor links active also in the dropdown menus

(function() {
	"use strict";
	const mainNav = document.querySelector('#mainNav');
	// selecting all anchor links
	const links = mainNav.querySelectorAll('a[href^="#"]');
	links.forEach(link => {
		let anchorLink = link.getAttribute(['href']);
		if(anchorLink !== '#') link.classList.add('active');
	});
	
})();
4

I was unsuccessful in getting this to work. Any chance you could post an example/fiddle?