Bootstrap Auto-Scaling Navigation Bar - html

Question

I really want my navbar to scale to the screen, as the screen gets smaller so does the font, as well as the image. Any help? Kinda like https://devmounta.in/ navbar, like the image scales as well as the text.
HTML:
<nav class="navbar navbar-default">
<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>
</button>
<div class="logo">
<a class="navbar-brand" href="#"><img src="css/images/logo.png"></a>
</div>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Stats</li>
<li>Drivers</li>
<li>Contact</li>
<li id="btn">Pledge Now</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-default {
background: 0 0;
border: none;
border-radius: 0;
margin-bottom: 0;
}
.container-fluid {
padding: 0;
width: 90%;
margin: 0 auto;
}
.navbar-brand, .navbar-nav li a {
line-height: 85px;
height: 85px;
padding-top: 0;
}
.navbar-default .navbar-brand {
color: #FFF;
font-family: 'Ubuntu', sans-serif;
font-weight: 500;
font-size: 28px;
text-transform: uppercase;
}
.navbar-default .navbar-nav>li>a {
color: #FFF;
font-size: 18px;
font-family: 'Ubuntu', sans-serif;
font-weight: 500;
position: relative;
text-decoration: none;
display: inline;
padding: 0;
margin-left: 15px;
margin-right: 15px;
text-transform: uppercase;
}
.logo {
width: auto;
height: 85px;
}
.logo img {
height: 45px;
line-height: 45px;
display: inline-block;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #84CF96;
-webkit-transition: .5s ease;
-moz-transition: .5s ease;
-o-transition: .5s ease;
transition: .5s ease;
}
.navbar-default .navbar-nav a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
margin-bottom: -10px;
bottom: 0;
left: 0;
background-color: #84CF96;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar-default .navbar-nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#btn a{
border: 1px solid #F5F5F5;
padding: 10px;
}
#btn a:hover:before {
visibility: hidden;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#btn a:hover , #btn a:focus{
color: #FFF;
background-color: #84CF96;
border-color: #84CF96;
-webkit-transition: .5s ease;
-moz-transition: .5s ease;
-o-transition: .5s ease;
transition: .5s ease;
}
Mobile CSS:
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
.navbar-default {
background-color: #84CF96;
}
.navbar-default .navbar-toggle {
border: 0;
float: left;
margin-top: 23.5px;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: #6AA678;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #FFF;
width: 25px;
height: 4px;
}
.navbar-default .navbar-brand {
float: right;
}
.navbar-nav {
margin: 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a {
display: block;
border-bottom: 1px solid #6AA678;
margin: 0;
height: 60px;
line-height: 60px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #FFF;
-webkit-transition: .5s ease;
-moz-transition: .5s ease;
-o-transition: .5s ease;
transition: .5s ease;
}
.navbar-default .navbar-nav > li:hover, .navbar-default .navbar-nav > li:focus {
background-color: #6AA678;
-webkit-transition: .5s ease;
-moz-transition: .5s ease;
-o-transition: .5s ease;
transition: .5s ease;
}
#btn{
display: none;
}
.navbar-collapse.in {
overflow-y: visible;
margin-bottom: 20px;
padding: 0;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #6AA678;
}
}

Answer 1

I'm not sure if this is gonna work in your case, but you can try changing your image width from "auto" to "100%" in your styles:
.logo {
width: 100%;
....
}
.logo img {
width: 100%;
...
}
This usually works for images, so probably will work within your nav.
Hope it helps!