Hola! ¡Tenemos nuestra Comunidad en Español!

JQuery: Add Bootstrap 3/4 navigation classes to Hubspot Advanced Menu markup.

Esteemed Advisor
<script>

    var navul       = $(".navbar-collapse .hs-menu-wrapper > ul"),
	navulli     = $(".navbar-collapse .hs-menu-wrapper > ul > li"),
        navulliul   = $(".navbar-collapse .hs-menu-wrapper > ul > li > ul");

    navul.addClass('nav navbar-nav navbar-right');

    navulli.filter('.hs-item-has-children').each(function(i){

	  $(this).addClass('dropdown');
	  $('> a',this).addClass('dropdown-toggle');
	  $('> a',this).attr('data-toggle','dropdown');

    });

    navulliul.addClass('dropdown-menu');

</script>

Can be customized. This script has to run for the classes to be applied, and the classes have to be applied for bootstraps css for those classes to take effect. Occaisonally there is a blip while this is happening but it hasn't been an issue for the sites I use this on. Best solution I have found to not being able to customize the advanced menu module markup.

- Jonathan Sumner
2 Replies
Highlighted
Regular Contributor

Are you available for contract based projects? 

Esteemed Advisor

@Larmahil, my upwork profile: https://www.upwork.com/o/profiles/users/_~01a5c9674d053cc7d0/

 

feel free to contact me there.

- Jonathan Sumner