Bootstrap navbar is not responsive

Question

I have coded up a bootstrap navbar, however when I tried to test its responsiveness, it does not create the little hamburger icon like it should...

I have an outer container for my page which has a fixed width, and an inner container for my fixed-top navbar of course. I have tried playing around with the containers, but it doesnt make the navbar responsive at all, so I must be missing something, or some code is conflicting with the responsive navbar??

fyi: the flex code doesnt seem to be working correctly in here :/

thanks guys

 body { padding-top: 102px; background-color: #4d4d4d; } .container { width: 1530px; margin: 0 auto; margin-top: 0; } .navbar-brand { font-size: 50px; padding-top: 40px; } .custom-nav { min-height: 90px; font-size: 16px; color: #000 !important; background-color: #fff; } .dropdown-menu.user-list { width: 100%; border-radius: 0; box-shadow: none; border: 0; background-color: #F8F8F8; font-size: 15px; } ul.user-list li a { padding: 8px 30px; } ul.user-list li.divider { width: 200px; margin: 0 auto; } .avatar-img { padding: 0; } i.fa-angle-down { font-size: 25px; vertical-align: middle; font-weight: lighter; } /* My styles */ li.dropdown { height: 90px; display: flex; justify-content: center; align-items: center; position: relative; } .user { margin-left: 50px; margin-right: 20px; } .label { border-radius: 100px; position: absolute; top: 25px; right: 2px; background-color: #ff5500; } .navbar-default .navbar-nav>li>a { color: #777; padding: 30px 19px; } li.dropdown.bell { margin-right: 40px; } .nav>li.dropdown.bell>a:hover, .nav>li.dropdown.bell>a:focus { background-color: transparent; } #search-container { width: 300px; } 

 <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> <div class="container"> <nav class="navbar navbar-default navbar-fixed-top custom-nav"> <div class="container"> <a class="navbar-brand navbar-left" href="#">PAGE NAME</a> <ul class="nav navbar-nav navbar-right"> </ul> <ul class="nav navbar-nav navbar-right"> <!-- search bar added --> <li class="dropdown"> <div class="input-group" id="search-container"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span> </div> </li> <li class="dropdown bell"> <a href="#" class="dropdown-toggle inbox" data-toggle="dropdown"> <img src="http://placehold.it/50x50" class=" avatar-img img-square"> <span class="label label-info">1</span> </a> <ul class="dropdown-menu bell" role="menu"> <li><a href="#"><span class="label label-warning">4:00 AM</span>Favourites Snippet</a> </li> <li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a> </li> <li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email design</a> </li> <li class="divider"></li> <li><a href="#" class="text-center">View All</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i> <!-- <span class="glyphicon glyphicon-menu-down"></span> --> </a> <ul id="menu" class="dropdown-menu user-list" role="menu"> <li><a href="#">Action</a> </li> <li class="divider"></li> <li><a href="#">Another action</a> </li> <li class="divider"></li> <li><a href="#">Something else here</a> </li> <li class="divider"></li> <li><a href="#">Separated link</a> </li> <li class="divider"></li> <li><a href="#">One more separated link</a> </li> </ul> </li> </ul> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-12"> <p>dfsjfhskfs</p> <!-- <div class="chevron right"> <a href="#"></a> </div> <div style="height: 1em;"> </div> --> </div> </div> </div> </div> 

Answer 1

You have a few issues that you need to fix.

1. You need a navbar-header , that includes the button that will be shown on small screen sizes.

    <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> <a class="navbar-brand navbar-left" href="#">PAGE NAME</a> </div> 

2. You need to wrap your menu content in a collapse div, that will be shown/hidden on button click on small screen sizes.

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 

3. The container inside of your menu needs to be a container-fluid .

  <nav class="navbar navbar-default navbar-fixed-top custom-nav"> <div class="container-fluid"> 

3. You need to make your container class have auto width for small screen sizes, otherwise it pushes the hamburger button off the screen. A bit of CSS with a media query can achieve this.

    @media(max-width: 767px) { .container { width: auto; } } 

Bootstrap Navbar Documentation

 body { padding-top: 102px; background-color: #4d4d4d; } .container { width: 1530px; margin: 0 auto; margin-top: 0; } @media(max-width: 767px) { .container { width: auto; } } .navbar-brand { font-size: 50px; padding-top: 40px; } .custom-nav { min-height: 90px; font-size: 16px; color: #000 !important; background-color: #fff; } .dropdown-menu.user-list { width: 100%; border-radius: 0; box-shadow: none; border: 0; background-color: #F8F8F8; font-size: 15px; } ul.user-list li a { padding: 8px 30px; } ul.user-list li.divider { width: 200px; margin: 0 auto; } .avatar-img { padding: 0; } i.fa-angle-down { font-size: 25px; vertical-align: middle; font-weight: lighter; } /* My styles */ li.dropdown { height: 90px; display: flex; justify-content: center; align-items: center; position: relative; } .user { margin-left: 50px; margin-right: 20px; } .label { border-radius: 100px; position: absolute; top: 25px; right: 2px; background-color: #ff5500; } .navbar-default .navbar-nav>li>a { color: #777; padding: 30px 19px; } li.dropdown.bell { margin-right: 40px; } .nav>li.dropdown.bell>a:hover, .nav>li.dropdown.bell>a:focus { background-color: transparent; } #search-container { width: 300px; } 

 <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> <div class="container"> <nav class="navbar navbar-default navbar-fixed-top custom-nav"> <div class="container"> <!-- 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> <a class="navbar-brand navbar-left" href="#">PAGE NAME</a> </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 navbar-right"> </ul> <ul class="nav navbar-nav navbar-right"> <!-- search bar added --> <li class="dropdown"> <div class="input-group" id="search-container"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span> </div> </li> <li class="dropdown bell"> <a href="#" class="dropdown-toggle inbox" data-toggle="dropdown"> <img src="http://placehold.it/50x50" class=" avatar-img img-square"> <span class="label label-info">1</span> </a> <ul class="dropdown-menu bell" role="menu"> <li><a href="#"><span class="label label-warning">4:00 AM</span>Favourites Snippet</a> </li> <li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a> </li> <li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email design</a> </li> <li class="divider"></li> <li><a href="#" class="text-center">View All</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i> <!-- <span class="glyphicon glyphicon-menu-down"></span> --> </a> <ul id="menu" class="dropdown-menu user-list" role="menu"> <li><a href="#">Action</a> </li> <li class="divider"></li> <li><a href="#">Another action</a> </li> <li class="divider"></li> <li><a href="#">Something else here</a> </li> <li class="divider"></li> <li><a href="#">Separated link</a> </li> <li class="divider"></li> <li><a href="#">One more separated link</a> </li> </ul> </li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-12"> <p>dfsjfhskfs</p> <!-- <div class="chevron right"> <a href="#"></a> </div> <div style="height: 1em;"> </div> --> </div> </div> </div> </div>