Comment faire de Twitter Bootstrap barre de navigation transparente?

Je suis en train de faire mon bootstrap navbar transparent. Je suis en utilisant bootstrap navbar-inverse et d'essayer d'ajouter de l'opacité par rgba(). Je veux que ma barre de navigation pour être transparent, comme indiqué dans l'image ci-dessous:

CSS:

@font-face {
  font-family: FuturaBook;
  src: url('fonts/FuturaStd-Light_1.otf');
}
body{
  font-family: 'FuturaBook', Arial, sans-serif;
}

/***************************************************************************
Navigation Bar
****************************************************************************/

.navbar-inverse{
  background-color: rgba(34, 34, 34, 0.5);
  border-bottom: none;

}

.navbar-header{
  width:100%;
  height: 90px;

}
.navbar-header #brand{
  font-family: 'FuturaBook', Arial, sans-serif;
  color: white;
  font-size: 20pt;
  margin-top: 20px;
  text-transform: uppercase;

}

.mynav li 
{
  list-style: none;
  display: inline-block;
  border-left: 1px solid white;
  padding-top: 36px;
  padding-left: 10px;
  padding-right: 10px;
  /* margin-top: 16px; */
  height: 90px;
}
.mynav li:last-child{
  border-right: 1px solid white;
} 

.mynav li a{
  color:white;
}
.mynav li a:hover{
  text-decoration: none;
}
/* .mynav li a:active{
background-color: black;
}*/

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<nav class="navbar navbar-transparent navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-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" href="#" id="brand">Fashion Garage</a>
<div class="mynav pull-right">
<ul>
<li><a href="">TRENDS</a></li>
<li><a href="">PRODUCTS</a></li>
<li><a href="">DESIGNERS</a></li>
<li><a href="">MEMBERS</a></li>
<li><a href="">SEARCH</a></li>
<li><a href="">MY ACCOUNT</a></li>
</ul>
</div><!-- /mynav -->
</div><!-- /navbar-header -->
</div><!-- /container -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/lady-1.jpg" alt="Lady-1">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/lady-2.jpg" alt="Lady-2">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</nav><!-- /nav -->
</div><!-- /wrapper -->

Pouvez-vous inclure l'ensemble de vos CSS s'il vous plaît? Parce qu'avec le code que tu fournis, il semble bien fonctionner. Je suppose que la .navbar-inverse style est remplacée par quelque chose d'autre dans votre CSS, Voici un codepen de travail: codepen.io/anon/pen/ZGYvWx
Ajout de css u a demandé @Zac.Ledyard
Intéressant, il semble toujours être de travailler pour moi ici: codepen.io/anon/pen/ZGYvWx

InformationsquelleAutor kdr | 2015-04-27

Si vous rencontrez toujours des problèmes, je suggère simplement de recommencer et d'utiliser ceci :
Il est assez simple et directe. Ne pas ajouter une autre classe navbar juste une suggestion. Vous pouvez aussi remplacer le lien du Bootstrap CSS et JS. C'est juste de la CAN lien. Voici la sortie si vous êtes intéressés.

Comment faire de Twitter Bootstrap barre de navigation transparente?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
body{
background-image: url('http://seamlesspatternchecker.com/hash/seamless-pattern-samples/a/3/5/a35-vector-vector-seamless-simple-pattern-curtain-design-modern-stylish-texture-repeating-abstract-158117696.jpg');
}
.navbar{
border: none;
border-radius: 0;
background-color: rgba(0,0,0,0.5);
}
</style>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-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" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>

InformationsquelleAutor CENT1PEDE

Dans la partie de votre site web, chargez votre nouveau fichier CSS spécifique après l'amorçage de la feuille de style.

<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

Dans votre personnalisé.css

.navbar {
background-color: transparent;
background: transparent;
border-width: 0px;
}

InformationsquelleAutor BM_tron

0

Essayez ceci:
```
.navbar {
background-color: transparent;
background: transparent;
}
.navbar li { color: #000 }
```
Mise à jour:
Sur CSS seconde ligne, remplacer: <nav class="navbar navbar-transparent navbar-inverse"> à <nav class="navbar navbar-transparent">

Réponses possibles:

Couleur transparente de Bootstrap 3 Navbar

css pour faire bootstrap barre de navigation transparente
- Malheureusement Pas de travail
- Vérifier la mise à jour: remplacer <nav class="navbar navbar-transparent navbar-inverse"> à <nav class="navbar navbar-transparent">
- Essayé avec la mise à jour.. Obtenir blanc navbar maintenant. merci pour ur effort, mais quelque chose d'autre est la question de @ptCoder
- Essayez d'ajouter ce .navbar-inner { background:transparent; }
- AUCUNE aide :(.. barre de navigation devient blanc
- Blanc ou transparent?
- Ajout de la nouvelle barre de navigation .. blanc
- Veuillez créer un jsfiddle.net avec votre code et des images...
InformationsquelleAutor ptCoder

Voici mon code stylo que j'ai essayé de faire la barre de navigation transparente et réactive. Espérons qu'il vous aide.

<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
<span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>
</button>

Vous pouvez trouver le reste du code

InformationsquelleAutor Sai Hanuman

Vous devez vous connecter pour publier un commentaire.