Unable to change navbar text color

Forum|Forum|5 years ago
August 15, 2020
2 replies
1386 views

I am creating a new site and trying to change the color of the navbar text to #800000 in Bootstrap. I can usually change the color of the etxt in teh CSS Designer, however, that is grayed out. I would appreciate assistance in this matter. This request is urgent as I have a meeting with the clinent on Modays @12179256.

Thank you

Here is .my code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Picture This Photo Books Homepage</title>

<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
<style type="text/css">
body {
background-color: #9fb6d8;
}
</style>
</head>
<body background="#9fb6d8" style="padding-top: 70px">

<style>
.dropdown-submenu {
position: relative;
text-color: #800000;

}

.navbar-default {
background-color:#9fb6d8;
background-image: none;
background-repeat: no-repeat;
border: none;
text-color: #800000

}

/*-- change navbar dropdown color --*/
.navbar-default .navbar-nav ,nav-header .nav navbar-nav .topFixedNavbar1 .open .dropdown-menu .navbar-default .navbar-nav .open .dropdown-menu {
color:#800000; text-color:#800000

}

.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
text-color: #800000

}

body { background: #9fb6d8 !important;}

.col-lg-6 {
}

.nav.navbar-nav.navbar-right li a {
color: 800000!important;
}

}</style>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-transparent"> <a class="navbar-brand" href="IMAGES/Picture This Photo Books Logo website 33%.gif"><img src="IMAGES/Picture This Photo Books Logo website 33%.gif" class="rounded-circle img-fluid" alt="Picture This Photo Books logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<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="#">About Us</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Photo Books </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Vacations</a> <a class="dropdown-item" href="#">Family & Events</a>
<a class="dropdown-item" href="#">Christenings</a> </div>

</li>
<li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-sm-12">

<br /><br /><br /><br /><br />
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_linkedin"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_button_email"></a>
<a class="a2a_button_google_gmail"></a>
<a class="a2a_button_wordpress"></a>
<a class="a2a_button_facebook_messenger"></a>
<a class="a2a_button_myspace"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>


<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '160276414735646');
fbq('track', 'PageView');
</script>.

<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background-color: grey">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <a href="IMAGES/Book Covers/Bat Mitzvah_Front Cover.gif"><img class="d-block mx-auto" src="IMAGES/Book Covers/Bat Mitzvah_Front Cover.png" alt="First slide"></a>
<div class="carousel-caption">
<h5>First slide Heading</h5>
<p>First slide Caption</p>
</div>
</div>
<div class="carousel-item"> <a href="IMAGES/Book Covers/Italy_Front Cover_Smaller.png"><img class="d-block mx-auto" src="IMAGES/Book Covers/Italy_Front Cover_Smaller.png" alt="Second slide"></a>
<div class="carousel-caption">
<h5>Second slide Heading</h5>
<p>Second slide Caption</p>
</div>
</div>
<div class="carousel-item"> <a href="IMAGES/Book Covers/My party_Cropped.gif"><img class="d-block mx-auto" src="IMAGES/Book Covers/My party_Cropped.gif" alt="Third slide"></a>
<div class="carousel-caption">
<h5>Third slide Heading</h5>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<br /><br />

<script src="js/jquery-3.4.1.min.js"></script>

<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>

</div></body></html>

This topic has been closed for replies.

osgood_

Legend

Replace all of this:

/*-- change navbar dropdown color --*/
.navbar-default .navbar-nav ,nav-header .nav navbar-nav .topFixedNavbar1 .open .dropdown-menu .navbar-default .navbar-nav .open .dropdown-menu {
color:#800000; text-color:#800000

}

.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
text-color: #800000

}

body { background: #9fb6d8 !important;}

.col-lg-6 {
}

.nav.navbar-nav.navbar-right li a {
color: 800000!important;
}

}

With this:

.navbar-nav .nav-link {
color: #800000!important; /*Change color of navbar links */
}
.navbar-nav .nav-link:hover {
color: #ffffff!important; /*Change color of navbar links on hover */
}

.dropdown-menu {
background-color: transparent!important; /*Apply transparent backgound to dropdown menu */
}
.dropdown-menu .dropdown-item {
color: #800000!important; /* Change color of dropdown menu links */
}
.dropdown-menu .dropdown-item:hover {
background-color: transparent!important; /*Apply transparent backgound to dropdown item */
color: #ffffff!important; /* Change color of dropdown item links */
}

When dealing with Bootstrap your best friend is going to be your browser inspect tool as Bootstrap is riddled knee deep in a lot of css rubbish, probably ranks up there with some of the worst css declarations I've ever come across in a framework, in my opinion, BUT 'the brain washed' and 'code challenged' still insist on using it. Makes no sense to me - you hook up a bloated Bootstrap css file then add more bloat by adding your own css to re-style the default styles. If that isnt ass backwards approach I dont know what is.

There is no reason or need to use Bootstrap if you are an individual or freelance developer. The only time I can say Bootstrap would be useful is if youre working in a team environment and everyone needs to be singing from the same hymn sheet. Good job I have zero desire to work in a team environemnt thenif this is the result of what supposedly good practice and coding is now days.