I am working on a personal website using a template and have run into an issue with something I am trying to do. As it stands the following is working:
<nav id="nav">
<ul>
<li><span class="icon fa-home">Introduction</span></li>
<li><span class="icon fa-male">About Me</span></li>
<li><span class="icon fa-star">Resumé</span></li>
<li><span class="icon fa-heart">Current Projects</span></li>
<li><span class="icon fa-th">Skills & Hobbies</span></li>
<li><span class="icon fa-paper-plane">Contact</span></li>
</ul>
With the following css:
#nav ul li a.active span:before
{
color: green;
}
However I would like to make it so that each has a different colour when active. I am struggling with selecting the in css by ID while also making sure it is active.
i.e. about-link will be color: red when active, resume-link will be color: blue when active etc.
Thanks in advance!
When you have IDs, use them directly since they are unique:
nav ul li a {
color: black; /* common unactive color */
}
#about-link.active {
color: red;
}
#resume-link.active {
color: blue;
}
etc...
If you want the same effect for hover states and active class, you can do:
#about-link:hover, #about-link.active {
color: blue;
}
Use the following class CSS selector. Make sure on each page you regulate what link has the "active" class:
http://jsfiddle.net/clarketm/6ksmj8wv/2/
#about-link.active {
color: red;
}
#resume-link.active {
color: blue;
}
Related
Hello guys here is my code to change color on hover. I can change the color of every object except one. -> SPAN_3
<li id="LI_2">
<span id="SPAN_3"></span> <fade>example text</fade>
</li>
.price-box:hover fade {
color: #fff;
}
**.price-box:hover span {
color: #ffffff !important;
}**
I cannot change the color of span. How can I fix this ? I searched the web but couldn't find with a solution.
Here is your issue fixed code
<li id="LI_2">
<span id="SPAN_3"><fade>example text</fade></span>
</li>
#SPAN_3:hover{color:red;}
#SPAN_3{color:#000;}
.price-box:hover fade {
color: #fff;
}
**.price-box:hover span {
color: #ffffff !important;
}**
See its working
li span{
color:red;
}
li:hover span{
color:black
}
<li id="LI_2">
<span id="SPAN_3">text for color change</span> <fade>example text</fade>
</li>
#SPAN_3{ color:#000;}
#LI_2{ color:#000;}
#LI_2:hover{ color:#ff0;}
#LI_2:hover{ color:#000;}
So I'm revamping my personal website and starting from scratch. I'm starting off with a navbar that's fixed to the bottom. However, when I insert the CSS rules with an internal stylesheet, it works the way I want it to, but when I use those exact same rules with an external stylesheet, the margin does not work properly.
Specifically, this is the problem rule:
.nav li {
margin: -5px;
}
With an internal stylesheet, it acts as intended, covering up unwanted whitespace in between the list items of my navbar (which is a stacked navbar fixed on the bottom).
However, when I put this exact same rule in the external sheet, it does not cover up that whitespace. Some other weird behavior is that if I comment out "margin: -5px;" it changes nothing, but if I comment out all of the rule ".nav li { margin: -5px; } it moves the content of each list item to the left (which is supposed to be centered using "text-align: center" in another rule.
I'm really confused by this odd behavior. Can anyone help me? Thanks.
EDIT: The weird thing is that other than linking bootstrap, jquery, etc. the html and css is pretty much nonexistent. I just put in a navbar and that's about it.
Here's the html in the body:
<div class="container-fluid">
<nav class="navbar navbar-fixed-bottom">
<ul class="nav nav-pills nav-stacked">
<li><a class="about" href="about.html"><div class="navTileContent"><i class="glyphicon glyphicon-user" aria-hidden="true"></i><p>about</p></div></a></li>
<li><a class="portfolio" href="portfolio.html"><div class="navTileContent"><i class="glyphicon glyphicon-briefcase" aria-hidden="true"></i><p>portfolio</p></div></a></li>
<li><a class="art" href="art.html"><div class="navTileContent"><i class="glyphicon glyphicon-edit" aria-hidden="true"></i><p>art</p></div></a></li>
<li><a class="contact" href="contact.html"><div class="navTileContent"><i class="glyphicon glyphicon-envelope" aria- hidden="true"></i><p>contact</p></div></a></li>
</ul>
</nav>
</div>
And here's the only CSS I have:
<style>
.nav li {
margin: -5px;
}
.nav li .navTileContent {
color: #e1e8f4;
text-align: center;
padding: 1%;
}
.nav li .navTileContent p {
padding-left: 20px;
display: inline;
}
.about {
background-color: #6ad8d1;
}
.portfolio {
background-color: #12d132;
}
.art {
background-color: #12466b;
}
.contact {
background-color: #0d336d;
}
</style>
This is meant to be a very simple sort of use case example, so while the styles won't match yours, I hope you see what I am trying to say.
<style>
li {
color: orange;
}
li.active {
color: blue;
}
li.muted {
color: red;
}
</style>
<style>
li {
color: blue;
}
li.active {
color: orange;
}
</style>
<ul>
<li>Notice this is not orange</li>
<li class="active">Notice this is orange</li>
<li class="muted">notice this is red, because nothing has overwritten it's style definition</li>
</ul>
I've done a crap ton of research into how I can accomplish this, but I can't find anything solid or anything that I can properly understand.
I want to override the Bootstrap Dropdown hover color. Not the Dropdown menu, the actual Dropdown button itself. By default, the text color is white, and when you hover over it, it's some sort of blue-green color. I want to make the blue-green color to white as well.
Does anyone have any idea how I can go about doing this?
Here's my current code incase you need it:
CSS:
#media {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.navbar-custom {
color: #262626;
background-color: #262626;
}
.navbar-default {
color: #262626;
background-color: #262626;
border-top: 4px solid red;
}
.navbar-default .navbar-brand:hover {
color: white;
}
.dropdown:hover {
color: white;
}
}
body {
background-color: black;
}
#navbar {
width: 100%;
}
HTML:
<div class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="dropdowns">
<a class="navbar-brand" id="brand">Traders: </a>
<li class="dropdown">
General <span class="caret"></span>
<ul class="dropdown-menu pull-left" role="menu">
<li>Medical</li>
<li>Utility</li>
</ul>
</li>
</ul>
</div>
</div>
Sorry if I left something out or don't make much sense, currently on some powerful pain meds. This helps me get my mind off the pain.
You can try including the !important to the style:
color: white !important;
this is done to override the default styles bootstrap establishes for the elements.
I'm using the latest version of Bootstrap 3.
Inside my navbar I have:
<div class="collapse navbar-collapse" id="topnav-navbar">
<ul class="nav navbar-nav navbar-right">
<li>Text</li>
</ul>
I would like to change navbar background colour and link colour.
I've created the following Sass code (SCSS syntax).
.navbar {
background: #2C3E50;
.navbar-nav li a {
color: #eee;
&:hover {
color: #18BC9C;
}
}
}
It's working almost fine, but when I click on link (not on hover) for a split second I'm getting my link in gray colour with border/box shadow (on hover and on out everything looks as it should).
The question is - what class to use to remove border/shadow and use colour I defined? I've tried a while and achieved nothing. It's really hard for me to guess what class to use to achieve effect I want.
You need to include :focus and :active too like this:
.navbar {
background: #2C3E50;
.navbar-nav li a {
color: #eee;
&:hover, &:focus, &:active {
color: #18BC9C;
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
}
Trying to change individual links in navbar to different colors when hovered. Can't seem to figure it out.
HTML:
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li class="page-scroll">
1
</li>
<li class="page-scroll">
2
</li>
<li class="page-scroll">
3
</li>
<li class="page-scroll">
4
</li>
</ul>
</div>
CSS:
.navbar-custom li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active
{
outline: 0;
background-color: #bdc3c7 !important;
color: #fff;
}
Have the current links set to red. But would like each individual link to have a different color. E.g. Link1 = Red, Link2 = Blue.
I am having trouble doing this! Help appreciated!
Thanks!
if you use SASS, it could be done in a more cleaner way like this in your scss file:
$colors: (1: red, 2: blue, 3: yellow, 4: black);
#each $anchor, $color in $colors {
#{".navbar-custom .nav li:nth-child("+ (1 + $anchor) + ") a:hover"} {
background-color: $color;
}
}
which will generate the CSS:
.navbar-custom .nav li:nth-child(2) a:hover {
background-color: red;
}
.navbar-custom .nav li:nth-child(3) a:hover {
background-color: blue;
}
.navbar-custom .nav li:nth-child(4) a:hover {
background-color: yellow;
}
.navbar-custom .nav li:nth-child(5) a:hover {
background-color: black;
}
Now you could add as many as different colors for all your links and let the SASS generate the CSS for you.
Yeah, just need to class them up uniquely
HTML
<li class="hidden colour1">
</li>
<li class="page-scroll colour2">
1
</li>
<li class="page-scroll colour3">
2
</li>
CSS:
.colour1:hover { background-color:blue; }
.colour2:hover { background-color:red; }
.colour3:hover { background-color:green; }
You would need to assign their CSS for each individual class and give the different link different class
like
.pagescroll1{
}
.pagescroll2{
}
and the call them from your HTML
The elegant solution is to select by attribute value. example for the first one:
a[href="#link1"]:hover,
a[href="#link1"]:active,
{
outline: 0;
background-color: #bdc3c7 !important;
color: #fff;
}
however, this works only when you're directly selecting the a-elements. With your third selector li.active, there is no information in that element as to where it links. in this case, you'll have to add classes as suggested by rob.