I am struggling with changing the color of my font in my nav bar button eg. Home to white. In my style.css file I first used .navbar-nav li but then the padding did not work, when I changed it to .navbar-nav ul the padding then worked. I then had to use .navbar-nav li a for the next style syntax to work and all seem to work except for the color syntax. Please advise what I am doing wrong for the color syntax not to work.
The color syntax again does not work in my .fa-bars class conditions but the font size in that class does work.
The last problem I seem to have is that the syntax in my .promo-title class does not work. Any help would be much appreciated. Thanks.
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
#nav-bar {
position: sticky;
top: 0;
z-index: 10;
/* sticky on the top */
}
.navbar {
background-image: linear-gradient(to right, #a517ba, #5f1782);
padding: 0;
}
.navbar-brand img {
height: 40px;
padding-left: 20px;
}
.navbar-nav ul {
padding: 0 10px;
}
.navbar-nav li a {
color: #fff;
/*Not working letters in nav bar not white*/
font-weight: 600;
float: right;
text-align: left;
}
.fa-bars {
color: #fff;
/*Not working menu bars not white*/
font-size: 30px;
}
.navbar-toggler {
outline: none;
}
/*--------------banner section------------*/
#banner {
background-image: linear-gradient(to right, #a517ba, #5f1782);
color: #fff;
padding-top: 5%;
/*Extended purple banner down*/
}
.promo-title {
font-size: 40px;
font-weight: 600;
margin-top: 100px;
}<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
</head>
<body>
<section id="nav-bar">
<nav >
<a href="#"> <img src="https://via.placeholder.com/50"> </a>
<button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
<i aria-hidden="true"></i> <!--adds menu bars when shrinking screen or in mobile view-->
</button>
<div id="navbarNav">
<ul >
<!--ml-auto moves navbar to the right side-->
<li >
<a href="#">HOME</a>
</li>
<li >
<a href="#">SERVICES</a>
</li>
<li >
<a href="#">ABOUT US</a>
</li>
<li >
<a href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
<!--Banner section-->
<section id="banner">
<div >
<div >
<div >
<p >BEST CUSTOM DATABASE COMPANY</p>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
</div>
</div>
</section>
</body>CodePudding user response：
Your selector specificity isn't high enough, so the Bootstrap styles take precedence. A quick look at your browser's document inspector reveals this. Use a more specific selector.
The same is true for the button (but you should remove the default Bootstrap icon).
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
#nav-bar {
position: sticky;
top: 0;
z-index: 10;
/* sticky on the top */
}
.navbar {
background-image: linear-gradient(to right, #a517ba, #5f1782);
padding: 0;
}
.navbar-brand img {
height: 40px;
padding-left: 20px;
}
.navbar-nav ul {
padding: 0 10px;
}
.navbar.navbar-light .navbar-nav li a {
color: #fff;
font-weight: 600;
float: right;
text-align: left;
}
body .navbar-light .navbar-toggler {
color: #fff;
border-color: #fff;
font-size: 30px;
}
.navbar-toggler {
outline: none;
}
/*--------------banner section------------*/
#banner {
background-image: linear-gradient(to right, #a517ba, #5f1782);
color: #fff;
padding-top: 5%;
/*Extended purple banner down*/
}
.promo-title {
font-size: 40px;
font-weight: 600;
margin-top: 100px;
}<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
</head>
<body>
<section id="nav-bar">
<nav >
<a href="#"> <img src="https://via.placeholder.com/50"> </a>
<button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i ></i>
</button>
<div id="navbarNav">
<ul >
<!--ml-auto moves navbar to the right side-->
<li >
<a href="#">HOME</a>
</li>
<li >
<a href="#">SERVICES</a>
</li>
<li >
<a href="#">ABOUT US</a>
</li>
<li >
<a href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
<!--Banner section-->
<section id="banner">
<div >
<div >
<div >
<p >BEST CUSTOM DATABASE COMPANY</p>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
</div>
</div>
</section>
</body>CodePudding user response：
You have specific classes for your <li> and <a> elements but you're not actually using them as far as I can see but then you're styling them in the navbar-nav class. Remove the classes from the inner elements and your overall style class will do it's job.
*
{
margin: 0;
padding: 0;
}
body
{
font-family: sans-serif;
}
#nav-bar
{
position: sticky;
top: 0;
z-index: 10; /* sticky on the top */
}
.navbar
{
background-image: linear-gradient(to right,#a517ba,#5f1782);
padding: 0;
}
.navbar-brand img
{
height:40px;
padding-left: 20px;
}
.navbar-nav ul
{
padding: 0 10px;
}
.navbar-nav li a
{
color: #fff; /*Not working letters in nav bar not white*/
font-weight: 600;
float: right;
text-align: left;
}
.fa-bars
{
color:#fff; /*Not working menu bars not white*/
font-size: 30px;
}
.navbar-toggler
{
outline:none;
}
/*--------------banner section------------*/
#banner
{
background-image: linear-gradient(to right,#a517ba,#5f1782);
color: #fff;
padding-top: 5%; /*Extended purple banner down*/
}
.promo-title
{
font-size: 40px;
font-weight: 600;
margin-top: 100px;
}
html
jquery
css
colors
html-lists<html>
<head>
<title> Template </title>
<link rel="stylesheet" href="style.css">
<!-- CSS only Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >
<!--JQuery Bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
</head>
<body>
<section id="nav-bar">
<nav >
<a href="#"> <img src="file:///C:/Users/E7470/Desktop/Agency Template/Images/demo-logo.png.png"> </a>
<button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
<i aria-hidden="true"></i> <!--adds menu bars when shrinking screen or in mobile view-->
</button>
<div id="navbarNav">
<ul > <!--ml-auto moves navbar to the right side-->
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">SERVICES</a>
</li>
<li>
<a href="#">ABOUT US</a>
</li>
<li>
<a href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
<!--Banner section-->
<section id="banner">
<div >
<div >
<div >
<p >BEST CUSTOM DATABASE COMPANY</p>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
</div>
</div>
</section>
</body>
</html>CodePudding user response：
You can use
a.nav-link{
color:#fff!important;
}