I’m having trouble changing the color of my text on my navigation bar for some reason. I have tried several different approaches, such as simply setting a universal color for the entire site or creating a class in css and applying it where necessary. Nothing seems to work. Any ideas?
HTML:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="navposition" class="nav navbar-nav">
<li class="individualbtnposition">@Html.ActionLink("Home", "Index", "Home")</li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>@Html.ActionLink("Our History", "Index", "OurCompany")</li>
<li>@Html.ActionLink("Facilities", "Facilities", "OurCompany")</li>
</ul>
</li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
<ul class="dropdown-menu">
<li>@Html.ActionLink("HR Forms", "HRForms", "FormsHandlers")</li>
<li>@Html.ActionLink("Corporate Forms", "CorporateForms", "FormsHandlers")</li>
<li>@Html.ActionLink("Employee Benefits", "EmployeeBenefitsForms", "FormsHandlers")</li>
<li>@Html.ActionLink("Accident Forms", "AccidentForms", "FormsHandlers")</li>
<li>@Html.ActionLink("Payroll Forms", "PayrollForms", "FormsHandlers")</li>
</ul>
</li>
<li><a href="#">Pay Stubs</a></li>
<li>@Html.ActionLink("FAQ", "FAQ", "FormsHandlers")</li>
</ul>
</li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">IT Support</a></li>
<li>@Html.ActionLink("Purchasing Ticket", "OnlineForms", "FormsHandlers", new {id = "purchasing-services-form" })</li>
<li><a href="#">Maint. Support</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
CSS:
#layoutBody {
background: white;
color: #002d62;
font-family: 'Oswald', sans-serif;
}
.navbar{
height: 135px;
border-bottom-style: solid;
border-bottom-width: 10px;
border-bottom-color: #002d62;
}
.navbar-inverse {
background: linear-gradient(#8c8c8c, #c4c4c4);
}
.navbar-header a {
height: 120px;
width: auto;
padding-top: 3px;
}
#logo {
height: 120px;
width: auto;
}
#navposition {
width: 50%;
margin-top: 5.5%;
}
.individualbtnposition {
margin-right: 8%;
font-size: large;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
#footer {
background-color: #002d62;
padding-top: 8px;
}
#bottombar {
background-color: #efcd21;
width: 100%;
height: 30px;
}
#sc2info {
color: #002d62;
margin-left: 15px;
}
@media screen and (max-width: 480px) {
#logo
{
width: 150px;
height: auto;
}
.navbar{
height: 67px;
border-bottom-style: solid;
border-bottom-width: 5px;
}
}
Which part of the HTML that you’ve posted are you regarding as the “navigation bar”? I don’t see anything in the CSS you posted which is setting a color on the navigation. If you want to target the whole of it, then I’d have thought the easiest thing to do would be to use the <nav> element.
nav {color: #00FF00;}
The @Html.ActionLink() doesn’t look like what’s output to the browser. Maybe they’re involved? Please post the code that the browser gets, not the code that’s on the server.
@TechnoBear there is nothing in there currently because when it didn’t work I took it out so I didn’t have a bunch of code in there not doing anything. I tried your suggestion but it did not work.
@Mittineague sorry about that, I always forget about this being ASP.net . Here is the correct HTML:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="navposition" class="nav navbar-nav">
<li class="individualbtnposition"><a href="/">Home</a></li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/OurCompany">Our History</a></li>
<li><a href="/OurCompany/Facilities">Facilities</a></li>
</ul>
</li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
<ul class="dropdown-menu">
<li><a href="/FormsHandlers/HRForms">HR Forms</a></li>
<li><a href="/FormsHandlers/CorporateForms">Corporate Forms</a></li>
<li><a href="/FormsHandlers/EmployeeBenefitsForms">Employee Benefits</a></li>
<li><a href="/FormsHandlers/AccidentForms">Accident Forms</a></li>
<li><a href="/FormsHandlers/PayrollForms">Payroll Forms</a></li>
</ul>
</li>
<li><a href="#">Pay Stubs</a></li>
<li><a href="/FormsHandlers/FAQ">FAQ</a></li>
</ul>
</li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">IT Support</a></li>
<li><a href="/FormsHandlers/OnlineForms/purchasing-services-form">Purchasing Ticket</a></li>
<li><a href="#">Maint. Support</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
If giving <nav> color green didn’t do anything there is likely a rule overwriting it.
Looking in your browser’s dev tools by "inspect"ing some text that should be changing but isn’t should show you the CSS it has. The color: #00FF00 will have a strike through. Look at the color value that doesn’t have a strike through and see if you can find out where in the CSS that is coming from.
And note the selectors the element has, you may need to use the same to get the specificity needed.
1 Like
Ray.H
November 30, 2017, 7:03pm
6
I believe you need to target the anchors to override the browsers default colors
Try this -
nav a {
color:red
}
It worked for me
1 Like
@Ray.H I tried that as well, it did not work.
@Mittineague here is what I’m seeing but I’m not sure where some of this css is. Possibly part of bootstrap or something?
Ray.H
November 30, 2017, 7:15pm
8
That ID you have on the body is setting the specifity
We could not see that with the html you posted earlier.
Remove the color from
#layoutBody {
background: white;
color: #002d62;
font-family: 'Oswald', sans-serif;
}
And then you will be able to style your nav (a) text
EDIT: You can change the #layoutBody to a class if you need too
But I have that so that it sets the color for all text throughout the webpage. Then I just override it where necessary. Shouldn’t there be a way to override it here too?
Also, the current color of the navigation text is not the color that is set in the layout anyways.
Ray.H
November 30, 2017, 7:19pm
11
Regardless, your ID on the body is causing too much specificity resulting in your problem
See my edit above
I would be tempted to strong arm the selector with something like
#layoutBody nav {
color: #00FF00;
}
Ok yea I applied your edit and it changed nothing.
Ray.H
November 30, 2017, 7:28pm
15
An ID is ok for an isolated section of the page but overkill when placed on the body.
You wind up having to strongarm everything and it can start pulling your hair out
This will take care of it
.layoutBody {
background: white;
color: #002d62;
font-family: 'Oswald', sans-serif;
}
<body class"layoutBody">
No that doesn’t take care of it. I already changed it to a class. It still does not allow me to change the text of the navigation.
Ray.H
November 30, 2017, 7:30pm
17
I see other ID’s in your code, do they have styles applied?
<ul id="navposition" class="nav navbar-nav">
You got other styles going on somewhere because I am able to make changes with the CSS you have posted here in this thread
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<style>
.layoutBody {
background: white;
color: #002d62;
font-family: 'Oswald', sans-serif;
}
.navbar{
height: 135px;
border-bottom-style: solid;
border-bottom-width: 10px;
border-bottom-color: #002d62; font-family: 'Oswald', sans-serif;
}
.navbar-inverse {
background: linear-gradient(#8c8c8c, #c4c4c4);
}
.navbar-header a {
height: 120px;
width: auto;
padding-top: 3px;
}
#logo {
height: 120px;
width: auto;
}
#navposition {
width: 50%;
margin-top: 5.5%;
}
nav a {
color:red
}
.individualbtnposition {
margin-right: 8%;
font-size: large;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
#footer {
background-color: #002d62;
padding-top: 8px;
}
#bottombar {
background-color: #efcd21;
width: 100%;
height: 30px;
}
#sc2info {
color: #002d62;
margin-left: 15px;
}
@media screen and (max-width: 480px) {
#logo
{
width: 150px;
height: auto;
}
.navbar{
height: 67px;
border-bottom-style: solid;
border-bottom-width: 5px;
}
}
</style>
</head>
<body class"layoutBody">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="navposition" class="nav navbar-nav">
<li class="individualbtnposition"><a href="/">Home</a></li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/OurCompany">Our History</a></li>
<li><a href="/OurCompany/Facilities">Facilities</a></li>
</ul>
</li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
<ul class="dropdown-menu">
<li><a href="/FormsHandlers/HRForms">HR Forms</a></li>
<li><a href="/FormsHandlers/CorporateForms">Corporate Forms</a></li>
<li><a href="/FormsHandlers/EmployeeBenefitsForms">Employee Benefits</a></li>
<li><a href="/FormsHandlers/AccidentForms">Accident Forms</a></li>
<li><a href="/FormsHandlers/PayrollForms">Payroll Forms</a></li>
</ul>
</li>
<li><a href="#">Pay Stubs</a></li>
<li><a href="/FormsHandlers/FAQ">FAQ</a></li>
</ul>
</li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">IT Support</a></li>
<li><a href="/FormsHandlers/OnlineForms/purchasing-services-form">Purchasing Ticket</a></li>
<li><a href="#">Maint. Support</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Got it. I needed the !important to override bootstrap.
color: #002d62 !important;
system
March 2, 2018, 2:36am
19
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
