I'm trying to create a white strike through in my active nav. It works in firefox but for the other browsers it only shows up in black. Is there a way to get it to be white.
HTML
<div id="menu">
<ul class="nav nav-pills menu">
<li class="nav_item">
HOME
</li>
<li class="nav_item">
ABOUT US
</li>
<li class="nav_item">
PORTFOLIO
</li>
<li class="active">
CONTACT US
</li>
</ul>
</div>
CSS
.active {
color: #fff;
text-decoration: line-through;
}
Here is the jsfiddel: JSFIDDLE
This works for me in Chrome:
.active a{
text-decoration-color: inherit;
text-decoration: line-through;
}
.active {
color:#fff;
}
jsFiddle example
Try this setting it to the a
.active a{
color: #fff;
text-decoration: line-through;
}
DEMO
Try this:
<div id="menu">
<ul class="nav nav-pills menu">
<li class="nav_item">
<span style='color:black;'>HOME</span>
</li>
<li class="nav_item">
<span style='color:black;'>ABOUT US</span>
</li>
<li class="nav_item">
<span style='color:black;'>PORTFOLIO</span>
</li>
<li class="active">
<span style='color:black;'>CONTACT US</span>
</li>
</ul>
</div>
Related
I've got the following HTML and CSS code which can also be found and played with here //jsfiddle.net/0k1qah6x/7/
My intent is for the number "1" which has the class "active" not to be red.
.pdf-pagination a:not(.active) {
color: red;
text-decoration: none;
}
<div class="pdf-pagination">
<ul>
<li class="disabled">
<a id="pdfPaginationLink0" href="#" data-page="0">←</a>
</li>
<li class="active">
<a id="pdfPaginationLink1" href="#" data-page="1">1</a>
</li>
<li>
<a id="pdfPaginationLink2" href="#" data-page="2">2</a>
</li>
<li>
<a id="pdfPaginationLink3" href="#" data-page="2">→</a>
</li>
</ul>
</div>
Your anchors don't have the .active class, their parent li do.
You'll have to change your selector and move the :not() deselector to the parent, as follows:
.pdf-pagination li:not(.active) a {
color: red;
text-decoration: none;
}
<div class="pdf-pagination">
<ul>
<li class="disabled">
<a id="pdfPaginationLink0" href="#" data-page="0">←</a>
</li>
<li class="active">
<a id="pdfPaginationLink1" href="#" data-page="1">1</a>
</li>
<li>
<a id="pdfPaginationLink2" href="#" data-page="2">2</a>
</li>
<li>
<a id="pdfPaginationLink3" href="#" data-page="2">→</a>
</li>
</ul>
</div>
I am using bootstrap3 dropdown-menu. Once I open and close the menu which contains subcategories, its hover color got disabled.
For example,
<ul class="nav navbar-nav">
<li> item1 </li>
<li> item2 </li>
<li> submenu </li>
<ul class="dropdown-menu">
<li> sub item1 </li>
</ul>
</ul>
My customized css for this,
.menu ul li a:hover {
background: #6f9be2;
}
When I check with developer tools on my browser, it got disabled.
How can I fix this?
Thanks in advance!
Use :
ul li a:hover {
background-color: #6f9be2 !important;;
}
ul li a:hover {
background-color: #6f9be2 !important;;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="nav navbar-nav">
<li> item1 </li>
<li> item2 </li>
<li> submenu </li>
<ul class="dropdown-menu">
<li> sub item1 </li>
</ul>
</ul>
I want the Data, Graph, Map, Table text color to be blue. Below is my code. I am new to HTML and CSS
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Data<span class="caret"></span></a>
<ul class="dropdown-menu" id="csv">
<li>cartodb_test1</li>
<li>test</li>
</ul>
</li>
<li>Graph</li>
<li>Map</li>
<li>Table</li>
</ul>
</div>
Below is my css part
.nav.navbar-nav li a {
color: blue;
}
My result:
As discussed below: Other styles are overridding yours, if you really need to override the color you can use !important.
.navbar-nav a{
color: dodgerblue !important;
}
.dropdown-menu a{
color: grey !important;
}
So i have this menu, this is the structure:
<div id="menu-home">
<ul>
<li> a.active </li>
<ul class="sub-menu">
<li> a </li>
</ul>
</ul>
</div>
What i need to access is that <ul class="sub-menu"> when the a is active
Can someone point me to that?
I've used:
#menu-s a.active ul.sub-menuul {
display:block;
}
Thanks
You have a messed up post, but if I understand what do you want to ask, the example below will help you.
This should be your HTML:
<div id="menu-home">
<ul>
<li>
<a href="#"> a.active
<ul class="sub-menu">
<li> sample </li>
</ul>
</a>
</li>
</ul>
</div>
This should be your CSS:
#menu-home ul li a:active ul.sub-menu li {
color: green;
border: 1px solid green;
}
I added few changes to CSS, for you, to help you understand what's happening.
This is the jsfiddle link with the demonstration:
http://jsfiddle.net/aWe3n/24/
This is not how u give class it should be Link
I have 2 or more <UL> sets inside, and wants to only make first UL <a> set to bold.
in fact, this is a menu with multiple sub menus, and I only want to make parent links bold.
I know it can be done by adding some more ID's or classes, but this is not an option, and just want to try css method only.
<ul class="menu">
<li class="collapsed first">
<a title="Mechanical products" href="1">Mechanical Products</a>
</li>
<li class="collapsed">
<a title="Chemicals" href="2">Chemicals</a>
</li>
<li class="expanded active-trail">
<a title="Instrumentation" href="3">Instrumentation</a>
<ul class="menu">
<li class="leaf first">
<a title="Control valves FISHER" href="4">Control Valves</a>
</li>
<li class="expanded active-trail">
<a class="active" title="Corrosion Monitoring System" href="5">Corrosion Monitoring</a>
<ul class="menu">
<li class="leaf first">
<a title="Access Fitting Assemblies" href="6">Fitting Assemblies</a>
</li>
<li class="leaf last">
<a title="Coupon Holders, Coupons & Probes" href="7">Holders,Coupons</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="collapsed">
<a title="Mechanical products2" href="8">Mechanical Products2</a>
</li>
</ul>
as of this example, only "Mechanical Products", "Chemicals", "Instrumentation" and "Mechanical Products2" should get bold.
Use the first child selector: >
.menu > li {
font-weight: bold;
}
Not that if you need to support IE6, you'll have to do it manually, as IE6 doesn't support the > selector:
.menu li a {
font-weight: bold;
}
.menu li ul li a {
font-weight: normal;
}
It will probably do it...
ul.menu li a
{
font-weight:bold;
}
ul.menu li ul li a
{
font-weight:normal;
}
You'll have to use the child selector and make the top-level <ul> unique by giving it some class:
ul.top-level > li > a {
font-weight: bold;
}
Demo: http://jsfiddle.net/kJJw9/
ul.menu li.collapsed a{font-weight:bold;}