Estoy tratando de hacer mi bootstrap navbar transparente. Estoy usando bootstrap navbar-inverse y tratando de añadir opacidad por rgba(). Quiero que mi barra de navegación, para ser transparente, como se muestra en la siguiente imagen:

Cómo hacer que Twitter Bootstrap Navbar transparente?

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 -->

Cómo hacer que Twitter Bootstrap Navbar transparente?

  • Se puede incluir a todos los de tu CSS, por favor? Porque con el código proporcionado, parece que funciona bien. Me imagino que el .navbar-inversa de estilo está siendo reemplazado por algo más en tu CSS Aquí es un codepen de trabajo: codepen.io/anon/pen/ZGYvWx
  • Se ha añadido css como u pidió @Zac.Ledyard
  • Interesante, todavía parece estar funcionando para mí aquí: codepen.io/anon/pen/ZGYvWx
InformationsquelleAutor kdr | 2015-04-27

4 Comentarios

  1. 3

    Si sigues teniendo problemas te sugiero empezar de nuevo y usar este :
    Es bastante simple y directo. No agregar otra clase navbar sólo una sugerencia. También puede reemplazar el enlace de la Bootstrap CSS y JS. Es sólo la CDN enlace. Aquí está la salida si tu estás interesado.

    Cómo hacer que Twitter Bootstrap Navbar 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>
  2. 1

    En la parte de su sitio web, cargar el nuevo archivo CSS personalizado después del default-bootstrap hoja de estilos.

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

    Personalizado.css

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

    Intente esto:

    .navbar {
    background-color: transparent;
    background: transparent;
    }
    .navbar li { color: #000 }

    Actualización:
    En CSS segunda línea de reemplazar: <nav class="navbar navbar-transparent navbar-inverse"> a <nav class="navbar navbar-transparent">

    Respuestas posibles:

    Color transparente de Bootstrap-3 Navbar

    css para hacer bootstrap navbar transparente

    • Verificación de la actualización: reemplazar <nav class="navbar navbar-transparent navbar-inverse"> a <nav class="navbar navbar-transparent">
    • Probado con la actualización.. Consiguiendo blanco de la barra de navegación de ahora. gracias por ur esfuerzo, pero alguna otra cosa es el tema de @ptCoder
    • Intente añadir esto .navbar-inner { background:transparent; }
    • NO ayuda :(.. Navbar se convierte en blanco
    • Transparente o de color blanco?
    • Añadido nuevo navbar .. Su blanco
    • Plese crear un jsfiddle.net con el código y las imágenes…

  4. 0

    Aquí está mi código de pluma que he tratado de hacer que la barra de navegación transparente y sensible. Espero que sea de ayuda para usted.

    <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>

    Usted puede encontrar el resto del código aquí

Dejar respuesta

Please enter your comment!
Please enter your name here