web-dev-qa-db-fra.com

css pour rendre le bootstrap navbar transparent

J'utilise bootstrap et j'ai une barre de navigation dans mon fichier html. J'aimerais que cette barre de navigation soit transparente pour afficher l'image de fond. Quelqu'un peut-il m'apprendre comment faire cela avec les CSS? J'ai essayé le css suivant rien ne s'est passé

.navbar-inner {
    background-color:transparent;
}

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                    <div class="container">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="brand" href="#">lol</a>
                        <div class="nav-collapse collapse">
                            <ul class="nav pull-right">
                                <li class="active"><a href="/">Home</a></li>
                                <li><a href="about">About</a></li>
                            </ul>
                        </div>
                    </div>
            </div>
        </div>
csstwitter-bootstrap
32
pythoniku

J'ai pu rendre la barre de navigation transparente en ajoutant une nouvelle classe .transparent à la barre .nav et en configurant le CSS comme suit:

 .navbar.transparent.navbar-inverse .navbar-inner {
    border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0,0,0,0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}

Mon balisage est comme ça

<div class="navbar transparent navbar-inverse">
            <div class="navbar-inner">....
24
scottM

Ajoutez simplement ceci à votre css: -

.navbar-inner {
    background:transparent;
}
56
Akshãy Paghdar

Ce que vous faites est inutile. 

Pour un fond transparent, faites simplement:

<div class="navbar">
// your navbar content
</div>

sans classe navbar-default ou navbar-inverse.

51
Jochem Stoel

Si vous utilisez la dernière version de Bootstrap et Ruby on Rails, vous pouvez simplement la saisir dans le fichier html.erb de la manière suivante: 

<nav class="navbar navbar-transparent">

Et c'est tout ce dont vous avez besoin.

18
Kelly M Curtis

Il n'y a pas besoin de tout ce gâchis.  

Vous pouvez rendre la barre de navigation transparente en n'écrivant pas navbar-defaultou navbar-inverse

<nav class="navbar">  //Don't add navbar-default to the class

  //

</nav>
7
Siva Prakash

dans bootstrap 3.3.7 (et 4.0 vraisemblablement), cela fonctionne:

au lieu de:

<nav class="navbar navbar-inverse navbar-fixed-top">

utilisation:

<nav class="navbar bg-transparent navbar-fixed-top">

pas de CSS nécessaire!

3
wla312

Code CSS:

.header .navbar-default {
  background: none;
}

Code HTML:

<header>
    <nav class="navbar navbar-default"></nav>
</header>
3
Richard King

Il suffit de laisser la barre de navigation par défaut intégrée à bootstrap.
Il vous suffit d’ajouter le css personnalisé ci-dessous, pour que tout fonctionne toujours comme il se doit.

HTML:

<nav class="navbar navbar-default">

CSS:

.navbar-default {
    background-color: transparent;
}
2
Nikki Pantony

Ajoutez la classe bg-transparente à la barre de navigation.

<div class="bg-primary">
    <div class="navbar navbar-dark bg-transparent">
         ...
    </div>
</div>
2
Amanda Treutler

Mise à jour 2018

Bootstrap 4

Par défaut, la barre de navigation est transparente. Rappelez-vous simplement d’utiliser navbar-light ou navbar-dark pour que les couleurs du lien soient en contraste avec la couleur de fond ...

https://www.codeply.com/go/FTDyj4KZlQ

<nav class="navbar navbar-expand-sm fixed-top navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
2
Zim

Essayez ceci dans votre code, cela a fonctionné pour moi -

donnez un identifiant à l'élément auquel vous voulez rendre transparent

par exemple selon votre code -

<div class="navbar-inner" id="nav1">

Puis appliquez cela dans votre css-

#nav1
{  
    background-color:#F00;  /*whichever you want*/
    opacity: 0.5;           /*0.5 determines transparency value*/ 
    filter:(opacity=50);       
}
1
Devashish Prasad

Suite à la réponse de Jochem Stoel ... j'ai ajouté "navbar-fixed-top" à la classe de la balise DIV et cela a fonctionné.

1
Jatin Grover
<nav class="navbar navbar-fixed-top navbar-light" style="background-color: transparent;">

<!--This should work just fine. it will make it transparent. hope i helped!-->
1
Grant Hood

Si vous utilisez la dernière version de Bootstrap i.e 4.0.0, il vous suffit d'utiliser le mot clé 'transparent' comme suit:

<nav class="navbar navbar-light transparent">

Il n’est tout simplement pas nécessaire d’appliquer de css à cet effet car bootstrap a cette propriété intégrée.

0
Tahir77667

Pour le projet Spring + Thymeleaf (boostrap), j'utilise généralement:

Inside css le code suivant

.navbar-inner {
        background:transparent;
    }

À l'intérieur du HTML la ligne

<nav class="navbar-inner">
0
cyberdemon

Testez avec background-image: none. Cette propriété supprimera le linear-gradient.

Vous pouvez voir le résultat ici: http://jsfiddle.net/eugip9/8D36M/

0
Pigueiras