view raw
Thami sithole Thami sithole - 9 months ago 21
AngularJS Question

using angular-ui-route to inject a navrbar but the collapse button appears on my navbar even if the browser is full scaled

I'm using angular-ui-route to inject a navbar but the collapse button appears on my navbar even if the browser is full scaled. It appears properly on mobiles but not when my browser is full scaled.

navbar web browser

navrbar mobile browser

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="#">WebSiteName</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>


Use a media query to hide the .navbar-toggle element

@media screen and (min-width: 500px) {
    .navbar-toggle {
        display: none;