Highlighted

Unable to change navbar text color

New Here ,
Aug 15, 2020

Copy link to clipboard

Copied

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>

TOPICS
Bootstrap, Code, How to

Views

45

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Unable to change navbar text color

New Here ,
Aug 15, 2020

Copy link to clipboard

Copied

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>

TOPICS
Bootstrap, Code, How to

Views

46

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 15, 2020 0
Adobe Community Professional ,
Aug 15, 2020

Copy link to clipboard

Copied

See this related discussion.

https://community.adobe.com/t5/dreamweaver/change-the-color-of-the-header-or-navbar-background/td-p/...

 

Use a separate external stylesheet for custom styles.  Add it below Bootstrap. 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 15, 2020 0
osgood_ LATEST
LEGEND ,
Aug 16, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2020 0