css om bootstrap-navigatiebalk transparant te maken

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

Antwoord 4, autoriteit 61%

Als u de nieuwste versie van Bootstrap en Ruby on Rails gebruikt, kunt u deze als volgt in het html.erb-bestand typen:

<nav class="navbar navbar-transparent">

En dat is alles wat je nodig hebt.

Antwoord 5, autoriteit 52%

2019 bijwerken

Bootstrap 4 – De navigatiebalk is standaard transparant

De meeste antwoorden hier zijn misleidend omdat ze betrekking hebben op Bootstrap 3. Standaard is de Bootstrap 4 Navbar transparant. Vergeet niet om navbar-lightof navbar-darkte gebruiken, zodat de linkkleuren het contrast van de achtergrondkleur tegenwerken…

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>

Antwoord 6, autoriteit 26%

Al deze rotzooi is niet nodig.

U kunt de navigatiebalk transparant maken door navbar-defaultof niet te schrijven
navbar-inverse

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

Antwoord 7, autoriteit 16%

Voeg de klasse bg-transparent toe aan de navigatiebalk.

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

Antwoord 8, autoriteit 10%

CSS-code:

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

HTML-code:

<header>
    <nav class="navbar navbar-default"></nav>
</header>

Antwoord 9, autoriteit 10%

in bootstrap 3.3.7 (en 4.0 vermoedelijk) werkt dit:

in plaats van:

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

gebruik:

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

geen CSS vereist!

Antwoord 10, autoriteit 6%

Het werkt prima om de standaard ingebouwde navigatiebalk met bootstrap te laten staan.
Je hoeft alleen maar de aangepaste CSS hieronder toe te voegen, op die manier werkt alles nog steeds zoals het hoort.

HTML:

<nav class="navbar navbar-default">

CSS:

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

Antwoord 11, autoriteit 6%

Probeer dit in je code, het werkte voor mij –

geef een id aan het element dat je transparant wilt maken

voor bijv. volgens uw code –

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

Pas dit dan toe in je css-

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

Antwoord 12, autoriteit 6%

Dit werkt voor 4.0.

<nav class="navbar navbar-expand-sm fixed-top navbar-light">
or
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">

het belangrijkste item is vaste bovenkant, anders wordt een witte of standaardpagina-achtergrond weergegeven, zelfs als er een afbeelding bovenaan is.
navbar-lightgeeft donkere letters, navbar-darkgeeft lichte tekst weer.

Antwoord 13, autoriteit 3%

Vervolg op het antwoord van Jochem Stoel… Ik heb ‘navbar-fixed-top’ toegevoegd aan de klasse van de DIV-tag en het werkte.

Antwoord 14, autoriteit 3%

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

Antwoord 15

Test met background-image: none. Die eigenschap verwijdert de linear-gradient.

Je kunt het resultaat hier zien: http://jsfiddle.net/eugip9/8D36M/

Antwoord 16

Als u de nieuwste versie van Bootstrapgebruikt, bijv. 4.0.0, hoeft u alleen het trefwoord ‘transparant’ te gebruiken als:

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

Het is gewoon niet nodig om hier CSS voor toe te passen, omdat Bootstrap deze eigenschap heeft ingebouwd.

Antwoord 17

Voor Lente+ Thymeleaf(boostrap) project gebruik ik meestal:

Binnen css de volgende code

.navbar-inner {
        background:transparent;
    }

Binnen de HTML de regel

<nav class="navbar-inner">

Antwoord 18

Een tijdelijke oplossing om de navbar-container een “vaste-top”-klasse te geven en dan de vaste-top-stijlen te wijzigen in “positie: absoluut”;

Hier is de code:

   <header class="nav-wrapper">
      <div class="container fixed-top">
        <nav class="navbar">
        </nav>
      </div>
    </header>

.fixed-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

Antwoord 19

<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-transparent">
              <a class="navbar-brand" href="#">Navbar w/ text</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav mr-auto">
                  <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                  </li>
                </ul>
                <span class="navbar-text">
                  Navbar text with an inline element
                </span>
              </div>
            </nav>