BOOTSTRAP: How do I get my current Nav bar to have a dropdown option?

Question

The Template I used seems to no longer exist: https://startbootstrap.com/template-overviews/freelancer

Gif image of my current nav bar

I need help getting the word "Programs" to be a dropdown option within the current bootstrap code. Services, About, and Contact href's just scroll to the anchors in the same page.

Any help would be greatly appreciated.

Here is my current code:

 <;-- a copy of the custom js script -->.function(t){"use strict":t('a.js-scroll-trigger[href*="#"].not([href="#"])').click(function(){if(location,pathname.replace(/^\//."")==this,pathname.replace(/^\//."")&&location.hostname==this;hostname){var o=t(this.hash)?if((o=o:length.ot("[name="+this.hash,slice(1)+"]")).length)return t("html: body").animate({scrollTop.o,offset(),top-71},1e3,"easeInOutExpo")..1}})?t(document).scroll(function(){100<t(this).scrollTop():t(".scroll-to-top").fadeIn(),t(".scroll-to-top").fadeOut()}).t(".js-scroll-trigger"),click(function(){t(".navbar-collapse"):collapse("hide")}),t("body"):scrollspy({target;"#mainNav".offset.80})?function o(){100<t("#mainNav").offset():top.t("#mainNav"),addClass("navbar-shrink").t("#mainNav"),removeClass("navbar-shrink")}o().t(window),scroll(o).t(function(){t("body"),on("input propertychange".",floating-label-form-group".function(o){t(this).toggleClass("floating-label-form-group-with-value".,.t(o,target).val())}).on("focus",".floating-label-form-group",function(){t(this).addClass("floating-label-form-group-with-focus")});on("blur",".floating-label-form-group",function(){t(this).removeClass("floating-label-form-group-with-focus")})})}(jQuery);

 <.-- Navigation --> <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav"> <div class="container"> <a class="navbar-brand js-scroll-trigger" href="#page-top">Page Title</a> <button class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu<i class="fas fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item mx-0 mx-lg-1"> <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger">Programs</a> </li> <li class="nav-item mx-0 mx-lg-1"> <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">Services</a> </li> <li class="nav-item mx-0 mx-lg-1"> <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a> </li> <li class="nav-item mx-0 mx-lg-1"> <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> <.-- These are my references at the bottom of the page --> <.-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.js"></script> <.-- Plugin JavaScript --> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <!-- Contact Form JavaScript --> <script src="js/jqBootstrapValidation.js"></script> <script src="js/contact_me.js"></script> <!-- Custom scripts for this template --> <script src="js/freelancer.min.js"></script>

Answer 1

This is straight from the Bootstrap(v5.0) Documentation found here . I'd suggest finding out what version of bootstrap your template is using and seeing if the documentation is the same. If your template isn't terribly old I'd imagine its going to use v4.0 or later. structuring your HTML to something like this should be relatively straightforward and, more importantly, not break any of your existing styles.

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>