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 @9am.
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>
<!-- Bootstrap -->
<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">
<!-- body code goes here -->
<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">
<!-- AddToAny BEGIN -->
<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>
<!-- AddToAny END -->
<!-- Facebook Pixel Code -->
<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>.
<style>
#9fb6d8: navbar background
.navbar .navbarfixed-top .navbar-expand-lg .navbar-light .bg-light .navbarbrand
background-color: #9fb6d8
</style>
<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 />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
</div></body></html>
2
Replies
AdChoices