CODEWITHSUNDEEP
jquerycssangularjstwitter-bootstraptwitter-bootstrap-3
Davide Dave Al'Thor Tarantino
Davide Dave Al'Thor Tarantino

Reputation: 11

How to tell if the navbar is collapsed in order to toggle items in the navbar list

I want to:

Here is my code: 

<nav class="navbar navbar-idebaca navbar-fixed-bottom">
    <div class="navbar-header">
        <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>
        <a class="navbar-brand" href="#"><img src="img/iebaca.png"></a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li>
                <img ng-show="somethingt to catch if the menu is collapsed"
                     src="img/button-aree.png">
                <a id="areelink" href="#" 
                   ng-hide="somethingt to catch if the menu is collapsed" 
                   ng-click="sendmessage('')">Aree</a>
            </li>
        </ul>
    </div>
</nav>

Upvotes: 0

Views: 2027

Answers (2)

M21B8
M21B8

Reputation: 1887

Bootstrap has it all contained within the standard CSS to do it all, if you look at this: http://getbootstrap.com/components/#navbar-default it has a pretty good demo of how to do it, i'd suggest starting with this, and then modifying it to display the content you want.

navbar-toggle kicks in when the screen size goes over 768 pixels:

@media (min-width: 768px)
.navbar-toggle {
  display: none;
}

you can then use collapse and navbar-collapse to control the expanded mode for larger displays.:

.collapse {
  display: none;
}

@media (min-width: 768px)
.navbar-collapse.collapse {
  display: block!important;
  height: auto!important;
  padding-bottom: 0;
  overflow: visible!important;
}

Upvotes: 0

Jonathan Wilson
Jonathan Wilson

Reputation: 4305

I think you want bootstrap's responsive utility classes.

The hidden-sm class will hide an element on small screens.

The visible-sm-block, visible-sm-inline, visible-sm-inline-block classes will show an element only on small screens.

Upvotes: 1

Related Questions