So for some reason, my hover CSS is not working. I am using bootstrap with some of their css. Is there something wrong with my code, or is it because bootstrap's code is overriding mine's?
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" role="tablist">
<li class="active">Home</li>
<li>HTML</li>
<li>CSS</li>
<li>About</li>
</ul>
</div>
</nav>
CSS
ul>li>a {
color: black;
padding: 15px;
}
ul>li>a:hover {
background-color: #B0B0B0;
color: red;
}
It's because the default Bootstrap styling is more specific.
These are the selectors that you need to override:
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #333;
background-color: transparent;
}
Therefore you could use:
Working Example Here
.navbar-default .navbar-nav>li>a:hover {
background-color: #B0B0B0;
color: red;
}
Without seeing exactly whats going on, the issue you're having may be related to not specifying a class on your unordered list.
This may fix the problem:
ul.navbar-nav > li > a {
color:black;
padding: 15px;
}
ul.navbar-nav > li > a:hover {
background-color: #B0B0B0;
color:red;
}
Related
I'm using bootstrap for my project and I done some mofigication with my own CSS file. however I need to change bootstrap nav-bar right side items selected color. No matter how hard I tried it want change with my CSS file
.navbar-static-top{
background-color: #3498db;
}
.navbar-brand
{
font-family: 'Lato', sans-serif;
color:white;
font-size: 190%;
}
body {
font-size: 9px;
}
table-hover{
background-color: #FFF;
}
thead th {
color: #FFF;
text-align: Left;
background-color: #3498db;
font-size: 11px;
}
tbody td {
height: 20px;
padding: px px;
font-size: 11px;
text-align: right;
}
.vertical-center {
background-color: #FFF;
}
.input-sm {
font-size: 12px;
color: black;
}
input[readonly] {
background-color: #fff;
/* any other styles */
}
.nav li{
padding-right:10px;
font-size: 120%;
color: #FFF;
}
.nav.navbar-nav.navbar-right li a {
color: #FFF;
font-size: 120%;
}
.input-sm {
height: 25px;
padding: px px;
font-size: 12px;
}
#submitbtn{
align: center;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Leave Application</a>
<ul class="nav navbar-nav">
</ul>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li >My Leaves</li>
<li class="active">Application</li>
</ul>
</div>
</nav>
and this is sample image how my site currently appeared in browser Link
I want change this gray color to white color with black text for selected item. how can I do this ?
First of all make sure you are loading your custom css after bootstrap, otherwise it wont override it.
Secondly make sure that your css rules points to DOM element exactly the same or more specific then bootstrap does.
Personally I prefix parent node with my own id or class and refer to it in my css. This guarantees me that I always use more specific css declarations then bootstrap does.
But if it doesn't makes sense to you you can simply use !important after your css proporty, but I recommend avoiding it at all costs unless you exactly know that there is no other way
May be the problem here with the linking your external css file and bootstrap file
you need place to them like this
so that browser read the last css update from the file.
now, try this.
just add below code to your CSS.
.navbar-default .navbar-nav > .active > a {
background: #000000;
color: white;
}
Please try this:
nav.navbar .navbar-collapse ul.navbar-right li.active a {
color: #000;
background: #fff;
}
As you provided the code it is working on codepen.
I think, the problem is css file not linked in HTML page.
I am trying to understand how to change color of "a" tags within "li" elements. I have the following unordered list:
<nav class="navbar navbar-default navbar-fixed-top">
...
<ul class="nav navbar-nav navbar-left">
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
...
</nav>
Why does the following work:
.navbar-default .navbar-nav li a {
color: #333333;
}
.navbar-default .navbar-nav li a:hover {
color: #EC5216;
}
But not:
li a {
color: #333333;
}
li:hover a {
color: #EC5216;
}
nor:
a {
color: #333333;
}
a:hover {
color: #EC5216;
}
I have read this post, but it is still unclear. Thanks ahead of time for the answers!
There is a hierarchy on the selectors that is counted. The more selectors you put, the higher it's defined style gets in the hierarchy.
Let's say for example you use just
a {
style....
}
this a has a total weight of 5.
But if you do a
.class a {
style...
}
.class has another 5 so 5+5 = 10 and will have higher priority.
You can test this by putting !important to lower-hierarchy statements.
see here
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
That is because
.navbar-default .navbar-nav li a {
color: #333333;
}
.navbar-default .navbar-nav li a:hover {
color: #EC5216;
}
has more weight and is more specific than
li a {
color: #333333;
}
li:hover a {
color: #EC5216;
}
a {
color: #333333;
}
a:hover {
color: #EC5216;
}
Please read more on CSS specificity..
https://developer.mozilla.org/en/docs/Web/CSS/Specificity
How can i change the color of the collapse button there? and the white lines like the divider. here is the picture. Can someone help me? im new to css,bootstrap and html so please help me. or give me some ideas.
Here is my code.
<nav class ="navbar navbar-default" role= "navigation">
<div class = "container">
<div class ="navbar-header">
<button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar" ></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li class="active">Students</li>
<li class="nav-divider"></li>
<li>Faculty</li>
<li class="nav-divider"></li>
<li>About us</li>
<li class="nav-divider"></li>
<li>Contact us</li>
<li class="nav-divider"></li>
</ul>
</div>
</div>
</nav>
Here is my css.
#fot{ position:fixed;
bottom:0;
}
.navbar-default{
background-color:rgb(193,57,45);
}
.navbar .nav > li > a{
color:#ffe6e6;
}
.navbar .nav > li > a:hover{
color:#000000;
}
.navbar .nav .active > a{
background-color:rgb(193,57,45);
color:#000000;
}
.navbar .nav .active > a:hover{
background:none;
color:#fff;
}
.nav .nav-divider{
height: 50px;
margin: 0 10px;
border-right: 1px solid #a92419;
border-left: 1px solid #c1392d;
}
#media(max-width: 768px)
{.nav .nav-divider{
height: 1px;
margin: 0 10px;
background-color:#a92419;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
margin:0 0 4px;
width: 25px;
height: 5px;
}
I guess this is what you are looking for:
.icon-bar
{
background:green !important; /*Whatever colour you want for icon lines*/
}
.navbar-toggle
{
background:yellow !important; /*Whatever colour you want for background */
}
In the CSS !important forces to apply property aside it over actual properties of Bootstrap CSS.
Update: In your CSS ADD Following code:
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: darkblue; /* Whatever Colour you want */
}
Yes ofcourse...just define some css on button class like this
CSS
button.navbar-toggle{
background:none;
border:none;
color:#000;
// and so on according to what style u want...
}
button.navbar-toggle span{
background:#000;/*change accordingly*/
// these span are for white line you can edit the lines in this css
}
How to remove the background of the collapse button when the mouse hover to the button. here is the picture. I really want to remove that white background when mouse hover to that button please help me. Im new to html and css and also to bootstrap.
Here is my html code
<nav class ="navbar navbar-default" role= "navigation">
<div class = "container">
<div class ="navbar-header">
<button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar" ></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li class="active">Students</li>
<li class="nav-divider"></li>
<li>Faculty</li>
<li class="nav-divider"></li>
<li>About us</li>
<li class="nav-divider"></li>
<li>Contact us</li>
<li class="nav-divider"></li>
</ul>
</div>
</div>
</nav>
Here is my css code.
#fot{ position:fixed;
bottom:0;
}
.navbar-default{
background-color:rgb(193,57,45);
}
.navbar .nav > li > a{
color:#ffe6e6;
}
.navbar .nav > li > a:hover{
color:#000000;
}
.navbar .nav .active > a{
background-color:rgb(193,57,45);
color:#000000;
}
.navbar .nav .active > a:hover{
background:none;
color:#fff;
}
.nav .nav-divider{
height: 50px;
margin: 0 10px;
border-right: 1px solid #a92419;
border-left: 1px solid #c1392d;
}
#media(max-width: 768px)
{
.nav .nav-divider{
height: 1px;
margin: 0 10px;
background-color:#a92419;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
margin:0 0 4px;
width: 25px;
height: 5px;
}
button.navbar-toggle{
background:none;
border:none;
color:#000;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #a92419;
}
}
You need to specify the background-color for both hover as well as focus.
You can do that by adding this to your CSS:
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background: none;
}
Here's a jsFiddle with the above code: https://jsfiddle.net/AndrewL32/mowb6gcb/
use this css which works on hover
button.navbar-toggle:hover{
background:none;
/* other css as you requirment*/
}
This is the normal, straight forward way, using the psuedo class :hover to add a css style to items upon hovering the mouse over them
button.navbar-toggle {
background: #ccc; //a gray background as default
}
button.navbar-toggle:hover {
background: none; //no background when you hover over the button
}
I am trying to make a dropdown with the properties of navbar-inverse and on hover. I have the on hover problem fixed, it is the navbar-inverse I can not figure out. I have searched the internet and found if you used this code
.inverse-dropdown {
background-color: #222;
border-color: #080808;
&>li>a{
color: #999;
&:hover{
color: #fff;
background-color: #000;
}
}
}
it would make the dropdown color what I wanted, but the text remained very hard to see. I have tried changing the color tag to make the text what I wanted but it did not change anything. With that code my dropdown looks like this:
As you can see if you look at the image, the text is hard to read. Can someone please help me I have been trying to do this for days.
For reference this is all code that goes with the dropdown:
HTML:
<li class="dropdown">
<i class="fa fa-group"></i> Our Staff
<ul class="dropdown-menu inverse-dropdown text-center">
<li>Employee Login</li>
</ul>
</li>
CSS:
.dropdown:hover .dropdown-menu {
display: block;
}
.inverse-dropdown {
background-color: #222;
border-color: #080808;
&>li>a{
color: #999;
&:hover{
color: #fff;
background-color: #000;
}
}
}
I found this:
.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open
.dropdown-menu {
background-color: #222;
color:#fff;
}
Also, could it be that the color you see is the "visited" version of the link? Could you post your whole navbar?
.dropdown-menu.menu-inverse {
background-color: #222;
border-color: #080808;
}
.dropdown-menu.menu-inverse li > a {
color: #9d9d9d !important;
}
.dropdown-menu.menu-inverse ul > li > a:hover {
color: #fff;
background-color: #000;
}
.dropdown-menu.menu-inverse li.divider {
background-color: #000;
}
This CSS is just compiled version of LESS from #CalmKai's answer (which is straight off the GitHub issue).
My apps show the username in the top navbar, so inverse for it too:
.navbar-inverse #appMenuUsername {
color: #9d9d9d
}