Установить фоновый цвет с непрозрачностью краха navbar

Как установить крах фонового цвета NavBar. В настоящее время это похоже на this.Установить фоновый цвет с непрозрачностью краха navbar

Если добавить:

.collapse { 
background: rgba(70,130,180 ,0.4);}

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

.navbar-nav > li > a { 
    height: 30px; 
    padding-top:8px !important; 
} 

li a { 
    margin-right: 15px; 
    color: gray; 
    text-transform: uppercase; 
    font-family: "Arial Black", Gadget, sans-serif; 
    font-size: 16px; 
} 

.navbar-toggle { 
    margin-top: 3px; 
    background-color: #5F9EA0; 
    height: 28px; 
} 

.icon-bar { 
    margin-top: -2px; 
    background-color: white; 
} 

ul.nav a:hover { 
    color: #5F9EA0; 
    background-color: transparent; 
} 

.navbar { 
    background: rgba(70,130,180 ,0.4); 
    height: 35px; 
    min-height: 35px; 
    position: fixed; 
    width: 100%; 
    z-index: 1; 
} 

.navbar-header img { 
    height: 32px; 
    padding-top: 3px; 
    padding-left: 20px; 
} 


<body> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <nav role="navigation" class="navbar navbar-fixed-top"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="pull-left" href="#"> 
      <img src="imgs/Logo.png"/> 
     </a> 
     </div> 
     <!-- Collection of nav links and other content for toggling --> 
     <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Profile</a></li> 
      <li><a href="#">Messages</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</body>

источник

2015-05-04 user3792694

Я уверен, что будет лучший способ структурировать вам HTML, но вот решение для Вашего случая:

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

@media (max-width:768px) { 
    .collapse { 
     margin-top:6px; 
     background: rgba(70, 130, 180, 0.4); 
    } 
}

А вот рабочий demo

источник

2015-05-04 23:51:53

Установить фоновый цвет с непрозрачностью краха navbar

ответ

Смежные вопросы