Бутстрап Auto-Scaling Navigation Bar

Question

Я действительно хочу, чтобы мой навигатор масштабировался на экран, так как экран становится меньше, так же как и шрифт, так и изображение. Любая помощь? Kinda, как https://devmounta.in/ navbar, как и изображения, а также текст.

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><a href="#">About</a></li> 
     <li><a href="#">Stats</a></li> 
     <li><a href="#">Drivers</a></li> 
     <li><a href="#">Contact</a></li> 
     <li id="btn"><a href="#">Pledge Now</a></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; 
} 

Мобильный 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

Я не уверен, если это сработает в вашем случае, но вы можете попробовать изменение ширины изображения с «авто» до «100%» в ваших стилях:

.logo { 
    width: 100%; 
    .... 
} 

.logo img { 
    width: 100%; 
    ... 
} 

Это обычно работает для изображений, поэтому, вероятно, вы будете работать в вашем навигаторе.

Надеюсь, это поможет!