bootstrap 3 - navbar brand responsive not working - css

Question

I have a navbar brand image of 408px x 130. The navigation look correct in browser but i cannot make it responsive on mobile. Also the menu button does not appear. This is my 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>1</li>
<li>2</li>
<li>3
</li>
<li></li>
<li class="dropdown">Accedi
<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 is pure bootstrap css out of this
navbar {
min-height: 130px;
line-height: 130px;
z-index: 1;
height: 130px;
}
which i need to fit the nav to the brand image height.
The problem is that when i use a mobile phone, the brand image does is not responsive, so the menu button does not appear and the logo gets all the screen...
JSFiddle

Answer 1

Technically the nav button is still there but because the nav element doesn't have the .navbar-default class, it isn't inheriting Bootstrap's styles. You can fix this by adding the following:
CSS
.navbar-toggle {
border-color: #ddd;
top: 37px;
}
.navbar-toggle .icon-bar {
background-color: #888;
}
You'll also need to add jQuery and Bootstrap js to enable the nav toggle for the 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 the image you'll need to do the following (styles may need adjusting based on how you need it to look)
You can set the height of .navbar-brand to auto and remove the height from .navbar. Also, changing its box-sizing to content will allow the image to sit within the padding of the element. You'll then need to add the .img-responsive class to the logo image element.
CSS
.navbar-brand {
box-sizing: content-box;
height: auto;
}
#media (max-width: 767px) {
.navbar-brand {
max-width: 15em;
}
}
/* Optional to replace line-height centering */
#media (min-width: 768px) {
.nav {
position: relative;
top: 60px; /* ( .navbar height / 2 ) - ( #navbar height / 2 ) */
}
}
HTML
<!-- Add img-responsive class to your 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 a Codepen example: https://codepen.io/raptorkraine/pen/YrKMgg