Thami sithole Thami sithole - 1 year ago 54
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>

Answer Source

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

@media screen and (min-width: 500px) {
    .navbar-toggle {
        display: none;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download