Загрузочный логотип на навигационной панели слева от jumbotron

Question

Я создаю сайт как часть моего упражнения. Я должен положить навигатор внутри jumbotron, и я уже сделал это. Проблема в том, что когда я помещаю изображение, оно не находится в левой части большей части jumbotron. Скорее, он расположен в самой левой части навигационной панели. Теперь я попытался переместить изображение -55 пикселей влево, чтобы он находился в самой левой части jumbotron, и он работает. Однако, если я попробую на меньших экранах, изображение внезапно пройдет мимо самой левой части экрана. Есть ли у вас какие-то способы обеспечения того, чтобы мой образ все еще находился в левой части большей части jumbotron, сохраняя при этом свою отзывчивость? Вот мой код:

div.navbar-header > a > img { 
 
    padding: 0px; 
 
    margin: 0px auto; 
 
    position: absolute; 
 
    left: -55px; 
 
    
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
      <div class="jumbotron"> 
 
       <nav class="navbar navbar-default" role="navigation"> 
 
        <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 src="http://demo.drupalizing.com/bluemasters/site/sites/all/themes/bluemasters/logo.png" class="img-responsive" width=274 height=56></a> 
 
        </div> 
 
        <div class="navbar-right navbar-collapse collapse" id="navbar"> 
 
         <ul class="nav navbar-nav"> 
 
          <li class="active"><a href="#"><h4>Home</h4></a></li> 
 
          <li><a href="#"><h4>About</h4></a></li> 
 
          <li><a href="#"><h4>Portfolio</h4></a></li> 
 
          <li><a href="#"><h4>Blog</h4></a></li> 
 
          <li><a href="#"><h4>Contact</h4></a></li> 
 
         </ul> 
 
        </div> 
 
       </nav> 
 
      </div> 
 
     </div>

Спасибо заранее.

Answer 1

Я думаю, что это ответ, в меру моих возможностей. Я переместил HTML-адрес изображения с навигационной панели только в контейнер, сразу после него.

/* 
 
Scales the size of the image so it isn't too large 
 
Pushes it from the top a little bit 
 
Changes the z-index so that image appears on top of the navbar rather than behind it 
 
*/ 
 

 
.container img { 
 
    margin-top: 40px; 
 
    position: relative; 
 
    z-index: 1; 
 
    width: 80%; 
 
} 
 
/* 
 
Moves the jumbotron behind the image now 
 
*/ 
 

 
.jumbotron { 
 
    position: relative; 
 
    z-index: -1; 
 
} 
 
/* 
 
When the screen gets smaller, the navbar shrinks, so this media query accommodates that and doesn't push the image down as much 
 
*/ 
 

 
@media screen and (max-width: 768px) { 
 
    .container img { 
 
    margin-top: 20px; 
 
    } 
 
} 
 
/* 
 
The navbar changes size again when smaller so this positions the image a bit nicer 
 
*/ 
 

 
@media screen and (max-width: 408px) { 
 
    .container img { 
 
    margin-top: 30px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <a class="navbar-brand" href="#"> 
 
    <img src="http://demo.drupalizing.com/bluemasters/site/sites/all/themes/bluemasters/logo.png" class="img-responsive" width=274 height=56> 
 
    </a> 
 
    <div class="jumbotron"> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
     <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> 
 
     </div> 
 
     <div class="navbar-right navbar-collapse collapse" id="navbar"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#"><h4>Home</h4></a> 
 
      </li> 
 
      <li><a href="#"><h4>About</h4></a> 
 
      </li> 
 
      <li><a href="#"><h4>Portfolio</h4></a> 
 
      </li> 
 
      <li><a href="#"><h4>Blog</h4></a> 
 
      </li> 
 
      <li><a href="#"><h4>Contact</h4></a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
</div>

Если у вас есть какие-либо вопросы по этому поводу, просто спросите. Если вы заметите что-то не так с этим, просто дайте мне знать! Если вы можете расширить это, не стесняйтесь: D.