css - Bootstrap navigation links extending beyond bottom of navbar -
i have bootstrap navigation works planned, except when in landscape view on mobile device. in instance links @ bottom of expanded menu extend beyond bottom of navbar. clues? (note using angular, iscollapsed).
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-ng-init="iscollapsed = true" data-ng-click="iscollapsed = !iscollapsed"> <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 pull-left" href="#!home">my menu</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-ng-class="{collapse: iscollapsed}"> <ul class="nav navbar-nav"> <li ng-click="iscollapsed=!iscollapsed"><a href="#!home"><i class="fa fa-home"></i>home</a></li> <li class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1"> <a class="dropdown-toggle" role="button" aria-expanded="false"><i class="fa fa-exclamation-triangle"></i>stuff <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li ng-click="iscollapsed=!iscollapsed"><a href="#!home"><i class="fa fa-search-plus"></i>stuff 1</a></li> <li ng-click="iscollapsed=!iscollapsed"><a href="#!add-item"><i class="fa fa-plus"></i>stuff 2</a></li> <li ng-click="iscollapsed=!iscollapsed"><a href="#!add-item"><i class="fa fa-refresh"></i>stuff 3</a></li> </ul> </li> <li class="dropdown" data-ng-class="{ open : dd2 }" data-ng-init="dd2 = false" data-ng-click="dd2 = !dd2"> <a class="dropdown-toggle" role="button" aria-expanded="false"><i class="fa fa-file"></i>more stuff <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li ng-click="iscollapsed=!iscollapsed"><a href="#!home"><i class="fa fa-search-plus"></i>more stuff 1</a></li> <li ng-click="iscollapsed=!iscollapsed"><a href="#!add-item"><i class="fa fa-refresh"></i>more stuff 2</a></li> <li ng-click="iscollapsed=!iscollapsed"><a href="#!add-item"><i class="fa fa-upload"></i>more stuff 3</a></li> </ul> </li> </ul> </div>
Comments
Post a Comment