PROBLEM: I combined a few menu items into a dropdown sub-menu on my NavBar to reduce its display size on computers. The new sub-menu functions properly (opens – closes) on mobile devices. However, on my computer it stays open when clicked unless I click elsewhere on the page to close it.

QUESTION: How do I get the dropdown menu to also close when clicked on a computer without disrupting its functionality on mobile devices? Thank you.

<!-- Begin Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">   <div class="container">     <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="img/arcade-logo-sm-05.png" alt="arcade drivers school"/></a>     <button class="navbar-toggler navbar-toggler-right full-width" 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" style="font-size: 100%">       <ul class="navbar-nav text-uppercase text-center ml-auto">         <li class="dropdown">           <a class="nav-link js-scroll-trigger" style="color: aliceblue"  href="#about">about us</a>         </li>         <li class="dropdown">           <a class="nav-link js-scroll-trigger" style="color: aliceblue"  href="#teens">teen programs</a>         </li>          <li class="dropdown">           <a class="nav-link js-scroll-trigger" style="color: aliceblue"  href="#adults">adult programs</a>         </li>                           <li class="dropdown" id="menu1" style="margin-top: 9px; padding-bottom: 10px">                 <a class="dropdown-toggle" style="color: aliceblue" data-toggle="dropdown" href="#menu1">                 services &amp; faq<b class="caret"></b>                 </a>             <ul class="dropdown-menu">                     <li><a class="nav-link js-scroll-toggle js-scroll-trigger" style="color: aliceblue; background-color: black; padding 10px js-scroll-trigger" href="#services">Our Services</a></li>                     <li><a class="nav-link js-scroll-toggle js-scroll-trigger" style="color: aliceblue; background-color: black" href="#locations">locations schedules enrollment</a></li>                     <li><a class="nav-link js-scroll-toggle js-scroll-trigger" style="color: aliceblue; background-color: black" href="#portfolio">Parent Care Programs</a></li>                     <li><a class="nav-link js-scroll-toggle js-scroll-trigger" style="color: aliceblue; background-color: black" href="#failure">Failure to Yield Course</a></li>                     <li><a class="nav-link js-scroll-toggle js-scroll-trigger" style="color: aliceblue; background-color: black" href="#faq">Frequently Asked Questions</a></li>                     <li><a class="nav-link js-scroll-toggle js-scroll-trigger" style="color: aliceblue; background-color: black" href="#employment">Employment Opportunities</a></li>             </ul>         </li>          <li class="dropdown">           <a class="nav-link js-scroll-trigger" style="color: aliceblue"  href="#contact">contact</a>         </li>         <li class="dropdown" id="menu2" style="margin-top: 8px; padding-bottom: 10px; font-weight: bold">           <a style="color: greenyellow; margin-top: 20px"  href="https://www.tds.ms/CentralizeSP/Student/Login/WIArcadeDriversSchool190906" target="_blank" rel="noreferrer">login</a>         </li>       </ul>     </div>   </div> </nav>     <!-- End Navigation -->