Добавить логотип перед торговой маркой с использованием начальной загрузки 3

Question

Я начал со следующим кодом, который должен генерировать навигационную панель моего сайта с помощью Джекил (и начальной загрузки):

<nav class="navbar navbar-default" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#jb-navbar-collapse"> 
     <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="{{ HOME_PATH }}">{{ site.title }}</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="jb-navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     {% assign pages_list = site.pages %} 
     {% assign group = 'navigation' %} 
     {% include JB/pages_list %} 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </nav> 

Однако, я хочу имеют логотип перед {{ site .title }}. С этой целью я пытался использовать следующий код:

<nav class="navbar navbar-default" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#jb-navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <div style="text-align:left"> 
     <a href="{{ HOME_PATH }}"><img src="{{ site.logoimg }}" height="5%" width="5%"/></a> 
     <a class="navbar-brand" href="{{ HOME_PATH }}">{{ site.title }}</a> 
     </div> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="jb-navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     {% assign pages_list = site.pages %} 
     {% assign group = 'navigation' %} 
     {% include JB/pages_list %} 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </nav> 

Проблемы:

1. Логотип справа от текста
2. Теперь есть огромное горизонтальное пространство между текстом + логотип и названия страниц.

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

Answer 1

попытаться дать Фиксированные значения IMG widht & высота

он дает точное пространство фактической ширины вашего изображения!

.navbar-brand-fix, 
 
.navbar-nav-fix li a 
 
{ 
 
    line-height:50px !important; 
 
    vertical-align:middle !important; 
 
    padding-top:25px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<nav class="navbar navbar-default" role="navigation"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#jb-navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <div> 
 
     <a class="pull-left" href="#"><img src="http://placehold.it/600x200" height="100px" width="100px"/></a> 
 
     <a class="navbar-brand navbar-brand-fix" href="#">TITle</a> 
 
     </div> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="jb-navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-nav-fix"> 
 
     <li><a href="#">Names</a></li> 
 
     <li><a href="#">Names</a></li> 
 
     <li><a href="#">Names</a></li> 
 
     <li><a href="#">Names</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav>

Я обновил SNIPPET