CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Parvvee
Parvvee

Reputation: 17

bootstrap nav-collapse wont show icon when collapsed

<nav class="navbar navbar-inverse navbar-fixed-top" id="target1">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-white icon-chevron-down"></span>
</a>
<div class="container-fluid">
<div class="navbar-inner">
<div  class="brand" style="padding-left:50px"><strong>abc.def </strong></div>
<div class="brand"  style="padding-left:40px"><strong>1234</strong></div>   
<ul class="nav">
<li style="padding-left:25px"><a href="contact.php"><i class="icon-white icon-envelope"></i><strong>Mail Us</strong></a></li>
<li><a href="/livechat/client.php"><i class="icon-white icon-comment"></i><strong>Live Chat</strong></a></li>
<li class="hidden-phone"><a href=""><i class="icon-white icon-globe">     </i><strong>Remote</strong></a></li>
<div class="nav nav-collapse">  
<li><a href="#approach"><strong>Our Approach</strong></a></li>
<li><a href="#services"><strong>Services</strong></a></li>
<li><a href="#aboutus"><strong>About Us</strong></a></li>

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

in this bootstrap navbar will collapse but the glyphicon wont showup when minimised.. Any Ideas or Suggestions..?

Upvotes: 0

Views: 1809

Answers (1)

timgavin
timgavin

Reputation: 5156

Your items were a little out of order, and you were missing the <a class="btn btn-navbar"... parts.

<nav class="navbar navbar-inverse navbar-fixed-top" id="target1">
<div class="navbar-inner">
    <div class="container">

        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>

        <a class="brand" style="padding-left:50px"><strong>abc.def </strong></a>

        <div class="nav-collapse collapse">
            <ul class="nav">
                <li><a href="contact.php"><i class="icon-white icon-envelope"></i><strong>Mail Us</strong></a></li>
                <li><a href="/livechat/client.php"><i class="icon-white icon-comment"></i><strong>Live Chat</strong></a></li>
                <li class="hidden-phone"><a href=""><i class="icon-white icon-globe"></i><strong>Remote</strong></a></li>
                <li><a href="#approach"><strong>Our Approach</strong></a></li>
                <li><a href="#services"><strong>Services</strong></a></li>
                <li><a href="#aboutus"><strong>About Us</strong></a></li>
            </ul>
        </div>

    </div><!-- container -->
</div><!-- navbar-inner -->

and don't forget the collapsable plugin...

<script>
$(document).ready(function() {
    $('.collapse').collapse();
});
</script>

Upvotes: 1

Related Questions