私のCSSスタイルを使用しないnavbarの背景色

Stackoverflowとオンラインで多くの例を見ることができますが、私のブートストラップナビゲーションメニューの背景色を変更する方法はありますが、それは機能しません。私のCSSスタイルを使用しないnavbarの背景色

問題がある場合に備えて、他のCSSアイテムを削除しようとしました。私はまた、ナビゲーションdivからIDを削除しようとしました。

マイHTML：

<!DOCTYPE html> 
<html lang="en" > 
<head> 
    <meta charset="UTF-8"> 
    <title>Basic Front End Portfolio Page</title> 



     <link rel="stylesheet" href="css/style.css"> 


</head> 

<body> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div> 
<nav class="navbar navbar-default"> 
<div id="headertitlebar" class="container-fluid"> 
    <div class="navbar-header"> 
    <div id="title" class="navbar-brand"> 
    <p><a href="#" id="logo">johnsonville.net</a></p> 
    </div> 
    </div> 
    <div id="navigation"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="active"><a href="#">Portfolio</a></li> 
     <li class="active"><a href="#">Contact</a></li> 
    </ul> 
    </div> 
</div> 
    </nav> 
    <div id="mainpage"> 
    <p> 
    <h3>I'm a beginner front end developer but an experienced DBA that is working to gather depth as a full stack developer. 
    </div> 
    </p> 
    <div id="portfoliopage"> 

    </div> 

    <div id="contactpage"> 

    </div> 
</div> 


</body> 
</html>

マイCSS：

#headertitlebar { 
    background-color: firebrick; 
    padding-left: 50px; 
    padding-right: 50px; 
} 
#title { 
    font-family: courier new; 
    font-size: 30px; 
    font-weight: 900; 
} 
#logo { 
    text-decoration: none; 
    color: black; 
} 

.nav li { 
background: red; 
}

出典

2017-12-02 Russ960

ブートストラップスタイルより前にスタイルをロードすると、ブートストラップスタイルによってオーバーライドされます。 – Imphusius

@Imphusius私はちょうどそれを試みたが、それは違いをもたらさなかった – Russ960

は.navbar-defaultクラスにCSSを入れてください。

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

いつも私の仕事です。うまくいけばあなたのためですか？

私はあなたのサンプルを試しましたが、1つの問題は、あなたがカスタムCSSをブートストラップのCSSを使用する必要があります。 Like：

<!DOCTYPE html> 
<html lang="en" > 
<head> 
    <meta charset="UTF-8"> 
    <title>Basic Front End Portfolio Page</title> 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/style.css"> 


</head> 

<body> 
    <!-- Latest compiled and minified CSS --> 
<style>#headertitlebar { 
    background-color: firebrick; 
    padding-left: 50px; 
    padding-right: 50px; 
} 
#title { 
    font-family: courier new; 
    font-size: 30px; 
    font-weight: 900; 
} 
#logo { 
    text-decoration: none; 
    color: black; 
} 

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { 
    background-color: red; 
} 
</style> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div> 
<nav class="navbar navbar-default"> 
<div id="headertitlebar" class="container-fluid"> 
    <div class="navbar-header"> 
    <div id="title" class="navbar-brand"> 
    <p><a href="#" id="logo">johnsonville.net</a></p> 
    </div> 
    </div> 
    <div id="navigation"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="active"><a href="#">Portfolio</a></li> 
     <li class="active"><a href="#">Contact</a></li> 
    </ul> 
    </div> 
</div> 
    </nav> 
    <div id="mainpage"> 
    <p> 
    <h3>I'm a beginner front end developer but an experienced DBA that is working to gather depth as a full stack developer. 
    </div> 
    </p> 
    <div id="portfoliopage"> 

    </div> 

    <div id="contactpage"> 

    </div> 
</div> 


</body> 
</html>

あなたのcssはブートストラップによって上書きされません。

次に、私はあなたのためにそれを編集しましたか？新しいCSS。

出典

2017-12-02 17:37:43 Rustyjim

私はメニューがヘッダの他の部分とは異なる色になりたいと思っていました。 #headertitlebarの色を使用して、あなたのお勧めを使用し、ヘッダーは正しく表示されますが、メニューの色はまだ私の目標色ではありません – Russ960

それはうまくいきました。私は欲しかった。ありがとう。 – Russ960

私のCSSスタイルを使用しないnavbarの背景色

答えて

関連する問題