How do I make my font color white, on the current nav bar class?
For example, when I click on a link on the nav it adds a class="current" to that link.
But I'm having trouble styling that particular link.
Here's the HTML:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-loggedin-nav mineul pull-right" style="font-size:22px;margin-top:7px; color:white;">
<li>
<a class="current" href="/">
</li>
<li>
Here's my CSS attempt which is way off:
.nav > li > a .current {
color: white;
}
.nav > li > a.current
Just a small change. The space between "a" and ".current" makes it think .current is a new element.
No space between the anchor element selector and the class name selector:
.nav > li > a.current {
color: white;
}
HTML
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-loggedin-nav mineul pull-right" style="font-size:22px;margin-top:7px; color:white;">
<li>
<a class="current" href="/">Text Here</a>
</li>
<li>
CSS
a.current {
color: white;
}
Related
https://www.bootply.com/XzK3zrPhJJ
In this example, why is the Home button not marked red?
.navbar a:hover,
.navbar a:focus,
.navbar a:active {
color: red !important;
}
<nav class="navbar navbar-expand-lg">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
Home
Links
About
</div>
</div>
</nav>
You shoud use not a:active but a.active
:after is a pseudo class. But you want to select a tags which also has .active class.
.navbar a:hover,
.navbar a:focus,
.navbar a.active {
color: red !important;
}
<nav class="navbar navbar-expand-lg">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
Home
Links
About
</div>
</div>
</nav>
Use the css Class selectors
The CSS class selector matches elements based on the contents of their
class attribute.
.navbar a.active {
color: red;
}
<nav class="navbar navbar-expand-lg">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
Home
Links
About
</div>
</div>
</nav>
keep in mind that The :hover CSS pseudo-class
The :hover CSS pseudo-class matches when the user interacts with an
element with a pointing device, but does not necessarily activate it.
It is generally triggered when the user hovers over an element with
the cursor (mouse pointer).
and avoid !important you can read more about !important_exception here
Why is it not active, but with active CLASS
instead of a:active use .active to reference, in this case you can also read more about the selector HERE
I think, it should be like this:
navbar a:hover {
color:red;
font-weight:bolder;
text-decoration:underline;
}
I must be doing something unusual, as the related questions and answers I've found so far on Stack Overflow aren't working for me. I'm new to css, so the answer may be obvious.
I prefer the solution to avoid !important, and if possible, only apply to the site header (e.g. not anywhere else on the site; that is, only apply to content inside block with id="my-block").
Also, would like solution to work for all levels in the nav (first, second, etc.).
This is what I tried:
.navbar .navbar-default > li > a:hover {
background-color: #FFFF00;
color: #FF0000;
}
Here's my code that runs along the top of my site:
<nav id="my-block" class="navbar navbar-default navbar-static-top navbar-default-siteheader navbar-inner-siteheader">
<div class="container">
<div class="collapse navbar-collapse in" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Menu1<span class="caret"></span>
<ul class="dropdown-menu">
...
</ul>
</li>
<li class="dropdown">
Menu2<span class="caret"></span>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
</div>
</div>
</nav>
Change
.navbar .navbar-default > li > a:hover
to
#my-block.navbar li a:hover
You can add your customize id in parent element like :-
<div **id="custom-nav-head"**>
<ul>
<li>Link</li>
</ul>
</div>
and then in css file, use below
**#custom-nav-head** .navbar .navbar-default > li > a:hover {
color: your color
}
if still its not work so then use !important property. Like :-
**#custom-nav-head** .navbar .navbar-default > li > a:hover {
color: your color **!important**;
}
Try this:
a.dropdown:hover{
background-color://whatever colour
}
I'm using [class*="menu-class-"]:not(.menu-class-2) for my <li> elements, it works properly. The problem is when I want to point to the <a> tag inside the <li>, [class*="menu-class-"]:not(.menu-class-2) a. For some reason it doesn't work.
CSS:
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) {
display: table-cell;
}
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) a {
text-transform: uppercase;
}
HTML
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3">
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
The problem is the <a> inside the <li class="menu-class-2"> is uppercase, but it should be lowercase, because I didn't add any property for this element. The container of the <a> (<li class="menu-class-2">), didn't get the display:table-cell property, so it works properly.
The JSFiddle link: http://jsfiddle.net/qnzos5t4/3/
The reason is because you do have a li that is not .menu-class-2:
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3"> <!-- THIS ONE HERE -->
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
Since your css rule is using a whitespace to select the anchor after the li, every <a> descendant of it, will be uppercase. You need to use a child selector:
Updated JsFiddle
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) > a {
Css
.sidebar .nav li:nth-child(1) a {
color: #fff;
font-size: 24px;
border: none;
background: #27AE60;
}
Html
<li>Dashboard</li>
<li id="accordian">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">New Registration</a>
<ul id="collapseOne" class="nav nav-pills nav-stacked collapse">
<li><i class="glyphicon glyphicon-chevron-right"></i> Resource</li>
<li><i class="glyphicon glyphicon-chevron-right"></i> Client</li>
</ul>
</li>
I want to design first li of parent ul but not the child li
I assume that .nav class is assigned to ul which is directly nested under element having a class of .sidebar so use the direct child selector here
.sidebar > ul.nav > li:first-child a {
color: red;
}
Demo
Note: Better use .sidebar > ul.nav > li:first-child > a instead of
above to be more specific
And if you meant every direct li which are nested under first level parent ul than just get rid of :first-child pseudo
.sidebar > ul.nav > li > a {
color: red;
}
Demo 2
From your code .nav li:nth-child(1) it looks like what you really want is to style the first li's anchor, but not it's adjacent sibling.
(Although you say
I want to design first li of parent ul but not the child li
...I think that you meant to say adjacent sibling
)
So actually given that your markup looks like this:
<ul>
<li>Dashboard
</li>
<li id="accordian">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">New Registration</a>
<ul id="collapseOne" class="nav nav-pills nav-stacked collapse">
<li><i class="glyphicon glyphicon-chevron-right"></i> Resource
</li>
<li><i class="glyphicon glyphicon-chevron-right"></i> Client
</li>
</ul>
</li>
</ul>
.. then the css code you posted actually works.
FIDDLE
<div id="header" class="top-bar">
...
</div>
<div id="specificdiv" class="top-bar">
<ul>
<li>
<li class="dropdown active">
<li class="dropdown active">
<li class="dropdown active">
<li>
</ul>
</div>
<div id="footer" class="top-bar">
...
</div>
I need to exclude style for specific <li> tags under div id="specificdiv".
I could exclude first element using this
.top-bar li:not(:first-of-type) {
float: none;
}
but how to remove rest 2 as well?
Use the direct descendant selector >. It only selects the immediate descendants of the targeted parents.
You could use #specificdiv ul > li and it will only select li on the first level of children.
And as BoltClock pointed out, you should wrap the li whose parent is a li inside of a ul.
<div id="specificdiv" class="top-bar">
<ul>
<li>
<ul>
<li class="dropdown active">
<li class="dropdown active">
<li class="dropdown active">
</ul>
<li>
</ul>
</div>
Why don't you just add class for the <li>, that you want to style?
Example:
<ul>
<li class="someClass">
<li class="dropdown active">
<li class="dropdown active">
<li class="dropdown active">
<li>
</ul>
And then your style:
.someClass{
float:none;
}
#specificdiv li:not(:first-of-type)
{
float: none;
}
it will work.
# is used to select element by id. example #my will select element which has id=my
for that you need nth-child(an+b) you can use it like this
li:nth-child(2){
..
}
li:nth-child(3){
..
}
now you hve a lot of alternative
ul li:nth-child(3n+3) {
color: #ccc;
}
li:nth-child(4n-7) { /* or 4n+1 */
color: green;
}
and if you want to check special lis use the > like this
div#pecificdiv ul.myList >li:nth-child(odd) {
color: green;
}
check this link for useful nth-child recipes
http://css-tricks.com/useful-nth-child-recipies/
and this
http://css-tricks.com/how-nth-child-works/