Anmol Wassan
Anmol Wassan

Reputation: 46

Bootstrap dropdown not working with Laravel on mobile

I have created a dropdown in the navbar. Here's the code for the dropdown:

<ul class="nav navbar-nav navbar-right">
    @if(Auth::check())
        @include('layouts.loggedin')
    @else
        @include('layouts.loggedout')
    @endif
 </ul>

When the user is logged in, it loads loggedin.blade.php and that's where the problem occurs.

loggedin.blade.php

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Welcome, {{Auth::user()->username}}
    <span class="caret"></span>
</a>
<ul class="dropdown-menu">
    <li><a href="/home">Dashboard</a></li>
    <li><a href="/{{Auth::user()->username}}">Profile</a></li>
    <li><a href="/logout">Logout</a></li>
</ul>

Whenever I click on Welcome, username, the navbar-toggle menu closes and the dropdown items are never displayed. But if I inspect element the page, edit the HTML code and paste this same code of loggedin.blade.php, the dropdown works. I think there is a conflict with JS but I have tried my best and nothing seems to work.

Upvotes: 2

Views: 3623

Answers (1)

Amit Kumar
Amit Kumar

Reputation: 101

Make sure jQuery is the first jS script e.g if you're using JavaScript, jQuery first and then the bootstrap Ja afterwards at the bottom of the page

Upvotes: 3

Related Questions