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="http://stage.insurancesalestraining.net">
<img class="img-fluid logo" src="http://stage.insurancesalestraining.net/wp-content/uploads/2018/11/Asset-14-8.png" alt="Insurance Sales Training & Education">
</a>

<!-- 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>
</button>

<!-- 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>
</a>
</li>
<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>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/about-us">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact-us">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/our-blog">Blog</a>
</li>
</ul>

<!-- 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
</a>
</li>

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

</div>

</div>
</nav>
<!-- Navbar -->


Piotr Glejzer staff answered 4 years ago


Hi,

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.

Best,

Piotr



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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
Tags