CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstraplaravel
Mubin
Mubin

Reputation: 4445

Bootstrap navbar toggle is not working with Laravel

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

Upvotes: 1

Views: 8628

Answers (2)

sonam gupta
sonam gupta

Reputation: 785

You have placed the javascript inside the link tag instead of script tag.Link is used for css and for js we use script. write it inside the script tag as:

<script type="text/javascript" src="{{your_source_for_script}}"></script>

Upvotes: 1

Koen van den Heuvel
Koen van den Heuvel

Reputation: 765

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

Upvotes: 5

Related Questions