Topic: Navbar dropdown won't work on first click
sarah.bakker asked 6 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!
<!-- 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 6 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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