Bootstrap navbar toggle is not working with Laravel

Mubin Published at Dev

Mubin

I've following code

<div class="container">
    <div class="row">
        <nav class = "navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topMenu" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <div class = "collapse navbar-collapse" id = "topMenu">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" class = 'navAnchor'>Link</a></li>
                    <li><a href="#" class = 'navAnchor'>Link</a></li>
                    <li><a href="#" class = 'navAnchor'>Link</a></li>
                    <li><a href="#" class = 'navAnchor'>Link</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div>
</div>

I also have tried to change

<div class = "collapse navbar-collapse" data-toggle="collapse" id = "topMenu">

but when I resize the screen to view on smaller screen, 3 bars appear, but clicking on them just do nothing.

EDIT at the top of page

<link rel="stylesheet" href="{{ URL::asset('assets/css/bootstrap.min.css') }}" />

and at the bottom, inside body

<link rel="text/javascript" href="{{ URL::asset('assets/js/jquery.js') }}" />
<link rel="text/javascript" href="{{ URL::asset('assets/js/bootstrap.min.js') }}" />

and by viewing the console(inspect element, it shows no error), every thing is being loaded properly. can someone guide me to right way.

Thanks

Koen van den Heuvel

What the problem is is that you are using the link tag where you actually should be using the script tag:

<link rel="text/javascript" href="{{ URL::asset('assets/js/jquery.js') }}" />
<link rel="text/javascript" href="{{ URL::asset('assets/js/bootstrap.min.js') }}" />

Javascript should be in a script tag for it to load into your page:

<script type="text/javascript" src="{{ URL::asset('assets/js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/bootstrap.min.js') }}"></script>

This should solve your problem

Collected from the Internet

Please contact [email protected] to delete if infringement.