如何製作不固定的透明導航欄？

我想在Bootstrap中製作透明的導航欄，它不是固定的，但我無法使用Bootstrap來完成。我應該使用純CSS還是可以用Bootstrap找到另一個選項？如何製作不固定的透明導航欄？

2017-01-27 Abdallah

嘗試以下

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

<meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<body style="background-color: #5cb85c;"> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
    \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> 
 
     \t <span class="icon-bar"></span> 
 
     \t \t <span class="icon-bar"></span> 
 
     \t \t <span class="icon-bar"></span>       
 
     \t </button> 
 
     <a class="navbar-brand" href="/"><i class="fa fa-code"></i> TC</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbar"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="/" class="home">Home</a></li> 
 
     <li><a href="templates" class="templates">Page 2</a></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
</nav> 
 
</body>

來源

2017-01-27 19:53:53

您可以添加更改切換菜單（它顯示，因爲框架很小）的樣式和導航項目的樣式。記得！這總是有效的： 'selector {property} {property-value！property-value！important; }' –

<nav class="navbar navbar-default">

片斷只需卸下navbar-fixed-top類

然後用CSS，使之透明

.navbar-default {background-color:transparent}

來源

2017-01-27 19:54:36

如何製作不固定的透明導航欄？

回答

相關問題