есть некоторые проблемы с моим бутстрапом и css

Question

Я хочу исправить логотип на панели навигации, я хочу либо увеличить высоту панели навигации, либо исправить ее, не изменяя размер изображения. Amd Когда я сжимаю веб-сайт до мобильного вида, Логотип отображается ниже кнопки свернуть. Предварительный просмотр веб-сайта (http://threeguys.us/works/testing.html)

testing.html

<div class="jumbotron"> 
<div class="container"> 
     <nav class="navbar navbar-inverse"> 
      <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> 
        <a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="60px"></a> 
       </div> 

       <div class="collapse navbar-collapse" id="myNavbar"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#">Rates</a></li> 
         <li><a href="#">Employee</a></li> 
         <li><a href="#">Contact Us</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
     <div class="call_button"> 
      <button type="button" class="btn btn-default">call us</button> 
     </div> 
     </div> 
     </div><!--jumbotron end--> 

style.css

.jumbotron 
{ 
    text-align: center; 
    background-size: cover; 
    background-image: url(images/car/car.png); 
} 
.container 
{ 
    padding:0px; 
} 
.navbar 
{ 
    height: 60px; 
    background-color: transparent; 
    border:0px; 
    padding-top: 0px; 
    } 
    .navbar-header 
    { 
    width:70px; 
    background-color: transparent; 
    } 
    ul 
    { 
    padding:0; 
    } 
.call_button 
    { 
    margin-top : 428px; 
    } 
    .content 
    { 
    background-color: white; 
    padding-top:0px; 
    } 
    .footer-nav 
    { 
    text-align: center; 
    } 
    .text_order 
    { 
    background-image: url(images/text_order/rectangle.jpg); 
    text-align: center; 
    padding: 5px; 
    } 
    .text_order p 
    { 
    font-size: 20px; 
    } 
.footer-nav li 
{ 
display: inline; 
} 
.footer-nav li a 
{ 
padding-left: 50px; 
text-decoration: none; 
color: #f7ab00; 
} 
.footer-nav li a:hover 
{ 
color:black; 
} 

Answer 1

Основываясь на ваш вопрос, комментарии и скриншоты здесь являются следующие рекомендации:

Удалить этот CSS код из style.css так разрушиться кнопка справа (а не над логотипом):

.navbar-header { 
    width:70px; 
    background-color: transparent; //don't necessarily need to remove this one but it isn't serving a purpose currently 
} 

Чтобы получить nav за пределами jumbotron в то время сохраняя полный экран изображения, выполните следующие обновления:

Update testing.html к следующему:

<nav class="navbar navbar-inverse"> 
       <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> 
         <a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="60px"></a> 
        </div> 

        <div class="collapse navbar-collapse" id="myNavbar"> 
         <ul class="nav navbar-nav navbar-right"> 
          <li class="active"><a href="#">Home</a></li> 
          <li><a href="#">Rates</a></li> 
          <li><a href="#">Employee</a></li> 
          <li><a href="#">Contact Us</a></li> 
         </ul> 
        </div> 
       </div> 
    </nav> 
    <div class="jumbotron"> 
     <div class="container">  
      <div class="call_button"> 
       <button type="button" class="btn btn-default">call us</button> 
      </div> 
      </div> 
</div><!--jumbotron end--> 

Update ваш style.css JumboTron класс и Navbar класс к следующему:

.jumbotron { 
    text-align: center; 
    background-size: cover; 
    background-image: url(images/car/car.png); 
    margin-top: -80px; //include this account for the height of the navbar and it's margin 
} 
.navbar { 
    height: 60px; 
    background-color: transparent; 
    border: 0px; 
    padding: 0 120px; //the 120px value will push the logo and menu nav closer together. You will need to update your collapse breakpoints though. Adjust as you see fit. 
} 

Если я не ответил все ваши вопросы, пожалуйста, прокомментируйте ниже, чтобы я мог обновить свой ответ.

Answer 2

Изменить поток вашего HTML. Избегайте размещения nav внутри .container. Используйте структуру, похожую на this

Это помещает логотип внутри заголовка, а также помещает его перед кнопкой свернуть в мобильном режиме.