Topic: Navbar dropdown won't work on first click

sarah.bakker free asked 4 years ago

I am having trouble with my dropdown. It works, but you have to click it twice every time you go to a new page for the dropdown to work. I am seeing the waves effect happen when I click the first time, but no dropdown. Any help would be amazing, thanks!

Training Website

<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
<div class="container-fluid" style="max-width: 1500px!important;">

<!-- Brand -->
<a class="navbar-brand" href="">
<img class="img-fluid logo" src="" alt="Insurance Sales Training & Education">

<!-- Collapse -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

<!-- Links -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<!-- Left -->
<ul class="navbar-nav ml-5 mr-auto smooth-scroll">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Curriculum</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/producer-support">Producer Support</a>
<a class="dropdown-item" href="/personal-insurance-training">Personal Insurance Training</a>
<a class="dropdown-item" href="/commercial-insurance-training">Commercial Insurance Training</a>
<a class="dropdown-item" href="/complex-risk-training">Complex Risk Training</a>
<a class="dropdown-item" href="/sales-training">Sales Training</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/continuing-education-courses">Continuing Education Courses</a>
<li class="nav-item">
<a class="nav-link" href="/about-us">About Us</a>
<li class="nav-item">
<a class="nav-link" href="/contact-us">Contact</a>
<li class="nav-item">
<a class="nav-link" href="/our-blog">Blog</a>

<!-- Right -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item mr-2">
<a href="tel:18338293960" class="nav-link" target="_blank">
<i class="fas fa-mobile-alt mr-1 "></i>1.833.829.3960

<li class="nav-item">
<a href="#" class="nav-link border border-light rounded">
<i class="fas fa-sign-in-alt mr-2"></i>Login


<!-- Navbar -->

Piotr Glejzer staff answered 4 years ago


it's again me. I copied and pasted your code to my free package and snippet and everything is going well with that code.  Check this out -- > yourCodevol2.

I suggest fix errors in console. If it will not help we will think about to different solution.



Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: PC
  • Browser: All
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes