CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Abhishek Parashar
Abhishek Parashar

Reputation: 11

navbar is not working on resizing the window

 <nav class="navbar navbar-default" role="navigation" id="my-navbar">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand-centered navbar-brand ">
                <a href="#" class="navbar-brand">
                 <img alt="Brand" src="assets/img/logo.png">
                </a></div>

            </div> 
            <div class="collapse navbar-collapse" id=" navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
            <li><a href="" class="glyphicon glyphicon-user btn btn-default navbar-btn navbar-right"> MyReservations </a>
           </li>
            <li> <a href="" class="glyphicon glyphicon-phone-alt btn btn-info navbar-btn navbar-right"> +919986040064 </a> </li>
            <li><a href="" class="glyphicon glyphicon-envelope btn btn-warning navbar-btn navbar-right"> [email protected] </a>
            </li>               
          </ul>


            </div>
        </div>
    </nav>

I am using this navbar. On resizing the window the toggle button appears but nothing happens on clicking on it. Is there is any coding mistake. I have included bootstrap.min.css and bootstrap.min.js and jquery.js files but still the problem is not resolved

Upvotes: 0

Views: 823

Answers (2)

Igor Ivancha
Igor Ivancha

Reputation: 3451

data-target of <button> must be same with id of <div class="collapse navbar-collapse" and another way to resolve this issue, to change id:

<div class="collapse navbar-collapse" id="navbar-brand-centered">

it will work too!

jsfiddle-link

Upvotes: 1

David Wilkinson
David Wilkinson

Reputation: 5118

You need to change the data-target to #navbar-collapse by the looks of it:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
</button>

You were targeting a different element (#navbar-brand-centered) which is where your logo is located, not your menu...

Upvotes: 2

Related Questions