Bootstrap 3 навигация стиль

Question

Я не могу добавить синюю полосу цвета (100%) прямо за ссылками меню в разрешении 1024 и выше? Как это добавить? Пожалуйста, сообщите

На данный момент, если я добавлю цвет bg с помощью css, он также покрывает логотип, который я не хочу. Синяя полоска должна быть ниже логотипа для меню. Пожалуйста помоги!!!

Here is the url of my layout

Спасибо Моника

Answer 1

1. Удалить весь блок кода Navbar бренда и вставьте его над NavBar DIV:

   <a href="yourlink.html" class="navbar-brand center-block"> 
   <img src="http://idea66.com/mobile/images/logo.png" alt="company name"></a> 
   

2. Удалить класс = "NAVBAR- бренд-центр-блок "от a href

   <a href="yourlink.html"> 
   <img src="http://idea66.com/mobile/images/logo.png" alt="company name"></a> 
   

3. Добавить класс = "Центр-блок" в IMG тег, который имеет свой логотип (не используйте NavBar-бренд)

   <a href="yourlink.html"> 
   <img src="http://idea66.com/mobile/images/logo.png" class="center-block" alt="company name"></a> 
   

Он должен выглядеть следующим образом:

<a href="yourlink.html"> 
    <img src="http://idea66.com/mobile/images/logo.png" class="center-block" alt="company name"></a> 

    <div class="navbar navbar-default navbar-static-top myNavBar" role="navigation"> 

Затем вы можете стиль .myNavBar с синим фоном

для того, чтобы делать то, что просят с логотипом вам нужно будет га Ve два экземпляра логотипа и использовать бутстрапирования реагирующие утилиты: http://getbootstrap.com/css/#responsive-utilities

В основном скрыть логотип над нав, когда его вплоть до мобильного размера путем добавления скрытых-хз в классе:

<a href="index.htm"> 
<img src="images/DECSTARLogo.png" style="width:30%" class="img-responsive center-block hidden-xs" alt="company name"></a> 

Затем добавить еще экземпляр логотипа обратно в навигацию со скрытым-скрытым скрытым-md-sm:

<div class="navbar navbar-default navbar-static-top myNavBar" role="navigation"> 
<div class="container"> 

<a href="yourlink.html" class="navbar-brand hidden-lg hidden-md hidden-sm"> 
<img src="http://idea66.com/mobile/images/logo.png" alt="company name"></a>