CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3navigation
user5889984
user5889984

Reputation:

How to use collapse menu bar only in bootstrap mobile mode

https://s11.postimg.org/a5wieqgkj/navbar.png

Hi, For bootstrap navigation bar how to make it show only collapse menu(without brand name and background bar) in small screen devices. That is it should show only following. https://s8.postimg.org/4npr7uxvp/navbar.png

Thanks.

Upvotes: 1

Views: 2771

Answers (1)

ridoansaleh
ridoansaleh

Reputation: 624

You could solve it by using media query. Here you go. Feel free to ask me. Hope this answer yours.

@media (max-width: 700px) {
  .navbar-header {
    background-color: white;
  }
  nav.navbar {
    border: 0px;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">About Us</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Upvotes: 3

Related Questions