Bootstrap 3 Navbar с логотипом

Почему каждый пытается сделать это с трудом? Конечно, некоторые из этих подходов будут работать, но они сложнее, чем это необходимо.

ОК, сначала - вам нужно изображение, которое будет вписываться в ваш навигатор. Вы можете настроить свое изображение с помощью атрибута высоты css (позволяя ширину масштабирования), или вы можете просто использовать изображение соответствующего размера. Независимо от того, что вы решите сделать - то, как это выглядит, будет зависеть от того, насколько хорошо вы оцениваете свой образ.

По какой-то причине каждый хочет привязать изображение внутри якоря с помощью navbar-brand, и это необязательно. navbar-brand применяет стили текста, которые не являются необходимыми для изображения, а также класс navbar-left (как и левый, а для использования в навигационной панели). Все, что вам действительно нужно, это добавить navbar-left.

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

Вы можете даже следовать этому с помощью элемента навигационной марки, который будет отображаться справа от изображения.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-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" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

ПОЛНАЯ ДЕМО С МНОГО ПРИМЕРОВ

ВАЖНОЕ ОБНОВЛЕНИЕ: 12/21/15

В настоящее время в Mozilla обнаружена ошибка . Я обнаружил, что разбивает navbar на определенные ширины браузера с помощью MANY DEMOS НА ЭТОЙ СТРАНИЦЕ. В основном ошибка mozilla включает в себя левую и правую прокладку на ссылке на навигационную марку в качестве части ширины изображения. Однако это можно легко устранить, и я проверил это, и я уверен, что это самый стабильный рабочий пример на этой странице. Он автоматически изменит размер и будет работать во всех браузерах.

Просто добавьте это в свой css и используйте навигационную марку так же, как и .img-responsive. Ваш логотип будет автоматически соответствовать

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

Другой вариант - использовать фоновое изображение. Используйте изображение любого размера, а затем просто установите требуемую ширину:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}

ОРИГИНАЛЬНЫЙ ОТВЕТ НИЖЕ (только для справки)

Люди, похоже, забывают об объектно-ориентированной игре. Лично я считаю, что это самый простой способ работать, потому что изображение автоматически настраивается на размер меню. Если вы просто используете объект, подходящий для изображения, он автоматически изменится на высоту меню.

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

Было указано, что это не работает в IE "пока". Существует polyfill, но это может быть чрезмерным, если вы не планируете использовать его ни для чего другого. Это похоже на то, что объект-подгонка планируется для будущей версии IE, поэтому как только это произойдет, это будет работать во всех браузерах.

Однако, если вы заметили класс .img-responsive в бутстрапе, max-width предполагает, что вы помещаете эти изображения в столбцы или что-то, что имеет явный набор. Это означает, что 100% конкретно означает 100% ширину родительского элемента.

    .img-responsive
        max-width: 100%;
        height: auto;
    }

Причина, по которой мы не можем использовать это с навигационной панелью, состоит в том, что родительский (.navbar-бренд) имеет фиксированную высоту 50 пикселей, но ширина не задана.

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

max-height: 100%;
width: auto;

Обычно нам нужно добавить display:block; к сценарию, но поскольку у навигационного бренда уже есть float: left; применяется к нему, он автоматически действует как элемент блока.

Вы можете столкнуться с редкой ситуацией, когда ваш логотип слишком мал. Подход, учитывающий IMG, не учитывает это, но мы это сделаем. Добавив атрибут "height" к .navbar-brand > img, вы можете быть уверены, что он будет масштабироваться, а также вниз.

max-height: 100%;
height: 100%;
width: auto;

Итак, чтобы закончить это, я поставил их вместе и, кажется, отлично работал во всех браузерах.

<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <div class="container">
        <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="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
</nav>

DEMO http://codepen.io/bootstrapped/pen/KwYGwq

Хотя ваш вопрос интересен, я не ожидаю, что для него будет один ответ. Возможно, ваш вопрос слишком широк. Ваше решение должно зависеть от: другого контента в навигационной панели (количество элементов), размеров вашего логотипа, если ваш логотип реагирует и т.д. Добавление логотипа в (с навигационной маркой) кажется хорошей отправной точкой. Я должен использовать класс navbar-brand, потому что это добавит отступы (верх/низ) 15 пикселей.

Я тестирую этот параметр на http://getbootstrap.com/examples/navbar/ с логотипом размером 300x150 пикселей.

Полноэкранный режим > 1200:

между 768 и 992 пикселями (меню не сбрасывается):

< 768 (меню свернуто)

Помимо эстетических аспектов, я не нашел технической проблемы. На маленьких экранах, возможно, большой логотип будет перекрываться или выходить из окна просмотра. Экраны между 768 и 992 пикселями также имеют другие проблемы, когда содержимое не вписывается в строку, см., Например: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

По умолчанию панель навигации имеет. Пример по умолчанию на панели навигации по умолчанию добавляет нижний край 30 пикселей, поэтому содержимое вашей навигационной панели никогда не должно перекрывать содержимое вашей страницы. (фиксированные navbars будут иметь проблемы при изменении высоты навигатора).

Вам понадобятся некоторые запросы css и media, чтобы адаптировать навигатор к вашим потребностям на разных размерах экрана. Попробуйте сузить свой вопрос. быть. описать проблему, которую вы обнаружили на Android.

обновить см. http://bootply.com/77512 для примера.

На меньших экранах, таких как телефон, смятое меню появляется над логотипом

замените кнопку и логотип в своем коде, сначала логотип (установите float: left на логотип)

Невозможно выровнять элементы меню, кроме верхнего

установите margin-top для .navbar-collapse ul. Используйте высоту логотипа минус высота навигационной панели, чтобы выровнять ее по низу или (высота логотипа - высота навигатора)/от 2 до центра

Инструкция по созданию загрузочной навигационной панели с логотипом, который больше, чем высота по умолчанию (50 пикселей):

Пример с логотипом 100px x 100px, стандартным CSS:

• Вычислите высоту и (верхнее дополнение + нижнее дно) логотипа. Здесь 120px (высота 100px + верхняя часть верхнего слоя (10px) + нижнее дно (10px))

• Перейти к bootstrap/customize. Установите вместо высота навигатора 50px > 120px (50 + 70) и navbar-collapse-max-height от 340px до 410px (340 + 70). Загрузить css.

• В этом примере я использую этот navbar. В навигационной марке:

    

    <div class="navbar-header">
      ...
      </button>
      <a class="navbar-brand myLogo" href="#">
        <img src="yourLogo.jpg" />
      </a>
    </div>...
  

  добавить класс, например myLogo, и img (ваш логотип)

  <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>.

• Добавить CSS

  .myLogo {   padding: 10px; }

• Адекватно другим размерам.

Пример

Ну, наконец, я получил эту же проблему, вот мое решение, и я протестировал ее на своем сайте во всех трех основных браузерах: Chrome, Firefox и Internet Explorer.

Прежде всего, если вы не используете текстовый логотип, тогда полностью удалите "navbar-brand", поскольку я нашел этот конкретный класс главной причиной того, что мое свернутое навигационное меню удвоилось.

Перейдите к user3137032, чтобы вести меня в правильном направлении.

Вы должны создать настраиваемый клиентский контейнер изображений, я назвал свой "логотип"

Ниже приведена надстройка HTML-бутстрапа:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="@Url.Action(" About ", "Home ")">
            <i class="glyphicon glyphicon-info-sign"></i> About
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Contact ", "Home ")">
            <i class="glyphicon glyphicon-phone"></i> Contact
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Index ", "Products ")">
            <i class="glyphicon glyphicon-tag"></i> Products
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

И код CSS:

.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 50%;
}
}

Значение в @media (max-width: x) может меняться в зависимости от ширины изображения вашего логотипа, у меня 368 пикселей. В зависимости от размера вашего логотипа, возможно, потребуется изменить процент. Первый запрос @media должен быть вашим порогом, а у меня была ширина изображения (368 пикселей) + размер сложенной кнопки (44 пикселя) + около 60 пикселей, и он выходил на 480 пикселей, где я начинаю масштабируемое масштабирование изображения.

Пожалуйста, удалите синтаксис бритвы из частей HTML. Дайте мне знать, исправляет ли вы вашу проблему, исправил ли я мой.

Изменить: Извините, я пропустил ваш вопрос о высоте навигатора. Есть несколько способов сделать это, лично я скомпилирую Bootstrap LESS с соответствующей высотой навигатора, для моих целей я использую 70 пикселей, а высота моего изображения - 68 пикселей. Второй способ сделать это в самом файле bootstrap.css, найти ".navbar" и изменить минимальную высоту: до высоты вашего логотипа.

Я использую img-отзывчивый класс, а затем устанавливаю max-width в элементе a. Вот так:

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

и CSS:

.navbar-brand {
    max-width: 50%;
}

Мое решение - добавить css "display: inline-block" в тег img.

<img style="display: inline-block; height: 30px; margin-top: -5px">

DEMO: jsfiddle

Вы должны использовать код следующим образом:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

Класс тега A должен быть "логотипом", а не брендом navbar.

Быстрое исправление. Создайте класс для logo и установите height в 28px. Это хорошо работает с навигационной панелью на всех устройствах. Заметьте, я сказал, что работает "WELL".

.logo {
  display:block;
  height:28px;
}

Это зависит от того, насколько высок ваш логотип.

По умолчанию высота <a> в навигационной панели составляет 20 пикселей, поэтому, если вы укажете height: 20px на своем логотипе, она будет прекрасно сочетаться.

Однако такой малый для логотипа, так что я выбрал именно это:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-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" rel="home" href="#" title="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

Это делает изображение 30px высоким и вертикально выравнивает изображение, добавляя отрицательный край к вершине (5px - половина разницы между заполнением на a и размером изображения).

В качестве альтернативы вы можете изменить заполнение элемента <a>, например:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-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" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

Мой подход состоит в том, чтобы включать в себя четыре разных изображения разных размеров для телефонов, планшетов, настольных компьютеров, больших рабочих столов, но показывать только ONE с помощью загрузочных загрузочных классов, как показано ниже:

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->

        <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>

Примечание. Вы можете заменить прокомментированную строку на предоставленный код. Замените PHP-код, если вы не используете wordpress.

Edit Note2: Да, это добавляет запросы на ваш сервер при загрузке страницы, которая может немного замедлить работу, но если вы используете технику спрайта css css, вероятность того, что логотип не будет напечатан при печати страницы и кода выше должно быть лучше SEO.

Другим подходом является внедрение Bootstrap встроенного .text-hide класса наряду с .navbar-brand для замены текста/контента бренда на фон изображение.

CSS:

.navbar-brand{ 
  background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
  width: 200px;
}

HTML:

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

Это очень последовательный метод и поддерживает ваше изображение в центре. Чтобы отрегулировать размер изображения, вам нужно только отрегулировать ширину .navbar-brand, так как высота уже установлена.

Вот живая демонстрация

Я также реализую его через свойство css background. Он работает в любом значении ширины.

.navbar-brand{
    float:left;
    height:50px;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: left center
}

У меня была та же проблема. Я решил это так:

<a href="#" class="btn btn-link navbar-btn">
  <img class="img-responsive" src="#">
</a>

Нет класса navbar-brand. Результат выглядит как логотип, который подходит для навигации и работает как ссылка. Также я рекомендую использовать класс navbar-right для пунктов меню, чтобы они не шли ниже логотипа.

<div class="collapse navbar-collapse navbar-right">
  <ul class="nav navbar-nav" role="navigation">
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
  </ul>
</div>

Этот код работает идеально, если вам нужно увидеть центр с центром и с автоматической шириной на панели инструментов. Он содержит функцию Wordpress для получения файла изображения с правильного пути:

<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">

При использовании LESS это работает:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}

Возможно, это слишком просто, но я просто скопировал строку navbar-brand, поэтому есть два из них: изображение, а затем текст.

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

И я создал изображение, которое находится внутри навигационной панели (примерно 1/2 высоты).

Самый простой и лучший ответ на этот вопрос - установить максимальную ширину и высоту в зависимости от вашего логотипа, изображение будет максимальным 50 пикселей, но не более 200 пикселей.

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

Это зависит от размера вашего логотипа и элементов навигационной панели, которые у вас есть.

Это не семантический, но я просто использую существующий элемент a, устанавливаю фоновое изображение, а затем создаю несколько вариантов для разрешения @2x, меньших размеров экрана и т.д.

Затем вы можете использовать класс .text-hide, чтобы получить какой-то текст на странице моды ol. Простое и эффективное, хотя и не правильное использование изображения.

Здесь ссылка на вспомогательный класс для замены текста:

http://getbootstrap.com/css/#helper-classes

Невозможность заставить любой из других ответов работать в моем случае (я, вероятно, не прошел тест интеллекта), и после некоторых экспериментов это то, что я использую (что, по моему мнению, очень близко к умолчанию для Bootstrap):

   <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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 class="navbar-logo">
            <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
               <img src="~/Images/logo.png" class="img-responsive">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
               <li>@Html.ActionLink("Home", "Index", "Home")</li>
               <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
               <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
               <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
               <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
         </div>
      </div>
   </div>

И в файле CSS я добавил следующее:

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

Обратите внимание, что @Html.ActionLink() - синтаксис Razor для тега <a>. Там, где сказано @Html.ActionLink(...), просто замените его соответствующим тегом <a>. В том же месте, где указано @Url.Action(...), замените его соответствующим URL (в этом случае тегом <a>).

Пожалуйста, попробуйте следующий код:

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>

Вместо замены эмблемы текста я разделил на две строки, как в приведенном ниже коде, и дал класс img-responsive изображению......

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
  <div class="container" style="margin-bottom:-1px;">
    <div class="row">
      <div class="col-md-3">
        <div id="menubar-logo">
          <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
        </div>
      </div>
      <div class=" col-md-offset-3 col-md-6">

        <ul class="nav navbar-nav">
          <li><a href="index.php" class="active">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- end of "row" -->
  </div>
  <!-- end of "container" -->
</div>
<!-- end of "collapse" -->

и, кроме того, я добавил следующие коды css.......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

Если мой код решает вашу проблему, это мое удовольствие.....

Вы можете попробовать использовать запрос @media, например, ниже.

Сначала добавьте класс логотипа, затем используйте @media, чтобы указать высоту и ширину логотипа на размер устройства. В приведенном ниже примере я нацелен на устройства с максимальной шириной 320 пикселей (iPhone). Вы можете играть с этим, пока не найдете наилучшее соответствие. Простой способ проверки: используйте хром или Firefox с элементом проверки. Утратите свой браузер, насколько это возможно. Наблюдайте за изменением размера логотипа в соответствии с указанной вами шириной @media max. Тест на iPhone, Android-устройства, iPad и т.д., Чтобы получить желаемые результаты.

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}

мой рабочий код - bootstrap 3.0.3. когда navbar-toggle, скрытое-xs оригинальное изображение логотипа.

    <a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
    </a>

    <a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
    </a>

<header class="navbar navbar-inverse header-outer" role="banner">
  <div class="container form-inline">
    <img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />

    <div class="pull-right padding-top">
      <form class="hidden-xs" role="form">

        <div class="form-group" style="padding-left:10px">
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group navbar-remember">
          <label class="white-font">
            <input type="checkbox" class="white-font"> Remember me
          </label>
        </div>
        <button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
      </form>
    </div>
  </div>

</header>

Пожалуйста, поймите код при своих собственных усилиях: D Это мой код проекта и его уже работающий:) Вот скриншот.

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header" >
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>

//Не забывайте добавлять бутстрап в начало вашего кода.