Bootstrap navbar transparent

Question

По какой-то причине я не могу заставить навигатор меняться. Я попытался сделать его прозрачным. Я знаю, что bootstrap navbar обычно является изображением, поэтому я включил background-image: none.

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header page-scroll"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     </button> 
    <a class="navbar-brand page-scroll" href="#intro">Eric West</a> 
    </div> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="hidden"> 
      <a class="page-scroll" href="#page-top"></a> 
     </li> 
     <li> 
      <a class="page-scroll" href="#about">About</a> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li> 
      <a class="page-scroll" href="#projects">Projects</a> 
     </li> 
     <li> 
      <a class="page-scroll" href="#contact">Contact</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

CSS:

navbar { 
    background-color: transparent; 
    background: transparent; 
    background-image: none; 
} 

Answer 1

Не уверен, если это опечатка на вашем конце, но вы должны добавить . целевой класс NavBar в CSS так:

.navbar { 
    background-color: transparent; 
    background: transparent; 
    background-image: none; 
} 

Как уже упоминалось @ Benya16, класс navbar-inverse изменяет базовые атрибуты навигационной панели, вы можете прочитать об этом в документах here. Если вы удалите этот атрибут начальной загрузки, он будет по умолчанию загрузочным.

Answer 2

Не удаляйте .navbar-inverse (или .navbar-default), если вы не планируете добавлять какой-то пользовательский CSS, чтобы компенсировать это, потому что они добавляют свойства к nav, в частности к классу navbar-toggle.

Без какого-либо из них вы удалите много CSS из своего навигатора, а navbar-toggle не будет видно на устройстве под 768px, оно будет там и будет действовать, но вы не сможете его увидеть.

Я бы добавил пользовательский класс nav и использовал его для переопределения свойства, которое вам нужно изменить.

См. Пример с одним и одним без дополнительного имущества.

body, 
 
html { 
 
    background: grey; 
 
    margin-top: 50px; 
 
} 
 
.navbar.navbar-custom { 
 
    background-color: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header page-scroll"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-1"> <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 page-scroll" href="#intro">Custom Navbar</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse navbar-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="hidden"> 
 
      <a class="page-scroll" href="#page-top"></a> 
 

 
     </li> 
 
     <li> <a class="page-scroll" href="#about">About</a> 
 

 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li> <a class="page-scroll" href="#projects">Projects</a> 
 

 
     </li> 
 
     <li> <a class="page-scroll" href="#contact">Contact</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 

 
<nav class="navbar"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header page-scroll"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-2"> <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 page-scroll" href="#intro">Navbar Only</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse navbar-2"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="hidden"> 
 
      <a class="page-scroll" href="#page-top"></a> 
 

 
     </li> 
 
     <li> <a class="page-scroll" href="#about">About</a> 
 

 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li> <a class="page-scroll" href="#projects">Projects</a> 
 

 
     </li> 
 
     <li> <a class="page-scroll" href="#contact">Contact</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 3

бутстрапирования Navbar определяется его файл CSS. Чтобы изменить цвет, просто сделайте .navbar-default:background-color: transparent !important, хотя важна не лучшая практика, вы всегда можете изменить цвет в файле Bootstrap.css.

Bootstrap.css - строка 4594, чтобы найти .navbar-обратный цвет фона.

сделайте ctrl-f и введите navbar-defualt, чтобы найти это.