css - bootstrap 3 - navbar brand responsive not working -

i have navbar brand image of 408px x 130. navigation correct in browser cannot make responsive on mobile. menu button not appear. navbar

<nav class="navbar default-nav">         <div class="container">             <div class="navbar-header">                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">                     <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" href="/"> <img alt="#{site_title}" src="/images/logo_white.png" /></a>             </div>             <div id="navbar" class="navbar-collapse collapse">                 <ul class="nav nav-pills navbar-right">                     <li><a href="/faq">1</a></li>                     <li><a href="/about">2</a></li>                     <li><a href="/contacts">3</a>                     </li>                     <li></li>                       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="loginbutton">accedi</a>                         <ul id="login-dp" class="dropdown-menu">                             <li>                                 <div class="row">                                     <div class="col-md-12">                                          <form action="/" method="post" class="form">                                              <div class="form-group">                                                 <label class="sr-only" for="form-username">username</label>                                                 <input type="text" id="username" name="email" placeholder="email..." class="form-username form-control" />                                             </div>                                              <div class="form-group">                                                 <label class="sr-only" for="form-password">password</label>                                                 <input type="password" name="password" placeholder="password..." class="form-password form-control" id="password" />                                                 <div class="help-block text-right">                                                     <a href="/resetpassword"> <span class="login-link">password dimenticata?</span>                                                     </a>                                                 </div>                                             </div>                                              <div class="form-group">                                                 <button type="submit" class="btn btn-primary btn-block">login</button>                                              </div>                                             <div class="checkbox">                                                 <label> <input type="checkbox" id="rememberme" name="remember-me" /> <span>ricordami</span>                                                 </label>                                             </div>                                         </form>                                     </div>                                     <div class="bottom text-center">                                         <span>non sei iscritto?</span> <a class="login-link" href="/register"><strong>registrati</strong></a>                                     </div>                                 </div>                             </li>                         </ul></li>                 </ul>             </div>             <!--/.nav-collapse -->         </div>      </nav> 

the style pure bootstrap css out of this

navbar {     min-height: 130px;     line-height: 130px;     z-index: 1;     height: 130px; } 

which need fit nav brand image height.

the problem when use mobile phone, brand image not responsive, menu button not appear , logo gets screen...

jsfiddle

technically nav button still there because nav element doesn't have .navbar-default class, isn't inheriting bootstrap's styles. can fix adding following:

css

.navbar-toggle {     border-color: #ddd;     top: 37px; }  .navbar-toggle .icon-bar {     background-color: #888; } 

you'll need add jquery , bootstrap js enable nav toggle menu

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 

to fix image you'll need following (styles may need adjusting based on how need look)

you can set height of .navbar-brand auto , remove height .navbar. also, changing box-sizing content allow image sit within padding of element. you'll need add .img-responsive class logo image element.

css

.navbar-brand {     box-sizing: content-box;     height: auto; }  @media (max-width: 767px) {     .navbar-brand {         max-width: 15em;     } }  /* optional replace line-height centering */  @media (min-width: 768px) {     .nav {         position: relative;         top: 60px;  /* ( .navbar height / 2 ) - ( #navbar height / 2 ) */     } } 

html

<!-- add img-responsive class logo --> <div class="navbar-header">     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">         <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" href="/">         <img alt="#{site_title}" src="http://2.228.86.3:8080/images/quipark_logo_white.png" class="img-responsive" />     </a> </div> 

here's codepen example: https://codepen.io/raptorkraine/pen/yrkmgg