I can’t get my links in the navigation to change color when you hover over them! what am I doing wrong?
Here is the page: http://codepen.io/Karnevore/pen/amBVjj
I can’t get my links in the navigation to change color when you hover over them! what am I doing wrong?
Here is the page: http://codepen.io/Karnevore/pen/amBVjj
Also, cant figure out how to get rid of the white line between the navigation and background?
a li:hover {
color: green;
}
just like that)
Please don’t wrap your <li>
tags in <a>
, it should be the other way around. It’s a list item (the li
) that contains a link, if that helps.
I mostly used the developer tools to figure out which elements were styled by Bootstrap. The white border is a border on .navbar-default so I set that to border:none
. For your hover colours, I copied the actual line that was setting the colour to override it. Is this best practice for handling Bootstrap stuff, I’m not exactly sure but it worked?
Code:
.navbar-default { border: none; }
navbar-default .navbar-nav>li>a:hover{ color: green }
Awesome! now how do i change the text from grey to white as its overriding my list item
Style the a tag (without the hover) with color: white;