Please have a look at http://jsfiddle.net/mrto2/nD2eB/.
I've given the
#filters li a:active {
border-top: 2px solid #EB2F26;
color: #EB2F26;
}
for Active font and border color but when we click on some menu, its color and border changes but it turns back while mouse release. So how can we fix this?.
There's no plain CSS way to deal with this, since link:active selector applies to <a>s being clicked. You can approach this by defining a li.active css class and adding it to links dynamically via js.
li a.active {
border: 2px red solid;
}
<ul class="nav">
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
<li><a>Link 4</a></li>
<ul>
// Using Jquery
$('ul.nav li').on('click', function(){
$(this).parent().find('a').removeClass('active');
$(this).addClass('active');
});
Related
I am working with Bootstrap tabs and was wondering what the best way is to identify tabs separately so I can style them differently — for example, so that there is a blue tab and a red tab instead of two tabs that look the same.
Here's the HTML just for the tabs: (note: I'm using react as well.)
<ul className="nav nav-tabs">
<li className="active"><a data-toggle="tab" href="#menu1">This is the headline of one article</a></li>
<li className="tab"><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
And here's the CSS I have so far:
.nav-tabs>li>a {
background-color: #3999C9;
color:red;
font-family:Fira Sans;
}
.nav-tabs {
font-family:Fira Sans;
border-bottom: 1px solid #10122B;
}
So not much, haha. Appreciate any tips, whether it's adding in a class somewhere or whatever.
Well, just use css selectors :
.nav-tabs li:nth-of-type(1) a { ... } // first tab
.nav-tabs li:nth-of-type(2) a { ... } // 2nd
.nav-tabs li:nth-of-type(3) a { ... } // etc
it its possible to select an parent Element by a specific class?
For an example i have an HTML-List:
<ul>
<li>Entry 1</li>
<li>Entry 2</li>
<li class="selected">Entry 3</li>
<li>Entry 4</li>
</ul>
All Elements has an bottom border:
ul li {
border-bottom: 1px solid #FF0000;
}
ul li.selected {
border-bottom: 1px solid #0000FF;
}
How i can tell over CSS that the color of the previous element is blue?
For little example (i know that :previous-child is not valid/exists but it's an little example):
ul li.selected:previous-child {
border-bottom: 1px solid #0000FF;
}
Here is an fiddle: http://jsfiddle.net/3W7PQ/
CSS 4 will allow this with the subject indicator, but there's no way in CSS as it exists today to select an element by reference to following elements.
The usual workaround is to have whatever generates your page specify the relationship itself. So, for example, you might have <li class="before-selected"> followed by <li class="selected">.
I'm trying to change the submenu background color of a menu in its hover state. I've tried using firebug to find the relevant css classes but have only been partially successful.
If you visit the site (http://www.yogaacademy.com.au/new/) you'll see that there is both a grey and black background on hover. I want it to be completely black.
It's a wordpress site using the woothemes canvas theme with some customizations. The html (below) is pretty standard, but the I haven't been able to figure out exactly where the relevant css is coming from: styles.css and css/ and custom.css in the canvas-child theme.
Your help will be much appreciated.
Thanks.
change background color to black in layout.css line 211
#navigation ul.nav ul {
background: black; /*#e6e6e6 => black*/
left: -1px;
}
Try remove "float: left;" from #main-nav li in custom.css line 143
#main-nav li {
/* float: left; */
Change:
#navigation ul.nav ul {
background: #e6e6e6;
}
to
#navigation ul.nav ul {
background: #000000;
}
I think this CSS line is coming from: wp-content/themes/canvas/css/layout.css on line 211
Cheers
Go to that submenu class, then put this code: (Let's assume it's called child)
child:hover {
background-color:black}
**Try this code......**
Put in you style sheet.
#navigation ul.nav ul li:hover{
background: #000000;
}
HTML
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Financial</li>
<li>Real Estate</li>
</ul>
</li>
</ul>
</div>
CSS
#myNav ul.nav ul li a:hover{
background: #000000;
}
I have the following code in CSS:
#nav li a:active{
background-color:brown;
}
#nav li a.index{background:purple;}
#nav li a.advertiser{background:red;}
#nav li a.publisher{background:green;}
#nav li a.new{background:blue;}
#nav li a.status{background:orange;}
#nav li a:hover {
border-bottom:5px solid brown;
}
and HTML
<ul id="nav">
<li><a class="index"....
<li><a class="advertiser"...
<li><a class="publisher"...
<li><a class="new"....
<li><a class="status".....
</ul>
The thing is that when i click on it, it transforms to brown but it doesn't stay brown.
Where am i mistaking can't realize.
the :active state will only be active when the user clicks on it; anchor or buttons' active states don't persists after the click is finished.
If you want to keep the anchor to brown after a click, you can use jquery to push a specific class when the user clicks on an anchor:
$('#nav a').on('click', function(e){
e.preventDefault(); //?
$('#nav a.active').removeClass('active');
$(this).addClass('active');
})
:active will give the highlights when the button or text is pressed, you need to code jquery to achieve this. Try this example:
<ul>
<li><a class="black classname" id="click">Home</a></li>
<li><a class="black" id="click">about</a></li>
<li><a class="black" id="click">services</a></li>
</ul>
CSS
.black{color:black}
.classname{color:red}
Jquery
$(document).ready(function(){
$("a#click").click(function(){
$("a").removeClass('classname')
$(this).addClass('classname')
});
});
Demo http://jsfiddle.net/XFYjz/
I am using joomla 3 and bootstrap.min.js
I am creating menu and giving special class in order to change hover, active, visited links and style of the menu.
I could not find how to change active link color of menu.
Suppose I have 2 menu. Home and Contact.
When I am in Home it is red, I want to change this color.
I could change a:active and a:hover.
Here is code;
.topmenu .active a,
.topmenu .active a:hover {
background-color: white;
}
.topmenu > li > a{
color: orange;
font-weight:bold;
}
.topmenu > li > a:hover {
color: black;
background:white;
}
Even I used div to change color of active link.
Here is code
#top-menu a{
background-color: white;
color: orange;
font-weight:bold;
}
#top-menu a:focus
{
color: orange;
}
#top-menu a:hover{
color: black;
}
Every time when I click to Home it is activated and the color is red. What I want to change it to orange. Can not find how to do it.
Here is my markup code
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="item-109 current active">Home</li>
<li class="item-138"> Russian </li>
<li class="item-110"></li></ul>
</div>
What do you suggest me to do?
Finally with experiments I found how to capture it.
#top-menu .current a
{
color: orange !important;
}
Thank you everyone for your time and help.
Much appreciated!
In order to do what your are trying to do you must first understand a:hover Must come after a:link and a:visited in the CSS definition in order to be effective. If they are not in this order then they will not work.
Second is you must understand that if you where thinking (a:active) meant the color of the current link the end user was on, this is incorrect. (a:active) changes the color when you click on the link. You can test this by holding down the mouse button on the link that you made a different color with the (a:active).
Finally, if you are trying to do this using just CSS you have to add a specific class on the current link that the end user is on. Below I left you an example hope this helps :)
Your Navigation Bar As Follows
-Home
-Russia
-Italy
We are on the Italy Page For This Example:
/*YOUR CSS SHOULD LOOK LIKE THIS*/
/* unvisited link grey */
#top-menu a:link {
color: #777;
}
/* visited link grey */
#top-menu a:visited {
color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
color: #0CF;
}
/* selected link blue */
#top-menu a:active {
color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
color: #0CF !important
}
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li>Home</li>
<li>Russian</li>
<li class="activePage">Italy</li><!--Page End User Is On-->
<!--Look UP ^^^^^^^^ Hope this helps :)-->
</ul>
</div>
Notice I did not put the .activePage tag in the other links? What this does is allow your original colors that you choose in your css for your navigation bar to still take place while the page that is active stays solid with a different color.
The reason this worked is because I added !important at the end of the color for that separate class.
.activePage {
color: #0CF !important
}
So to apply this same technique to your other pages it would simply look like this:
Home Page
/*YOUR CSS SHOULD LOOK LIKE THIS*/
/* unvisited link grey */
#top-menu a:link {
color: #777;
}
/* visited link grey */
#top-menu a:visited {
color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
color: #0CF;
}
/* selected link blue */
#top-menu a:active {
color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
color: #0CF !important
}
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="activePage">Home</li>
<li>Russian</li>
<li>Italy</li>
</ul>
</div>
I hope I gave you a solid answer to your question because I hate it when I look all over the web and can't truly find the answer I am looking for.
I suggest you creating an ID (#) selector locally for the Div that contains the a links, then take that id name in your style-sheet and override the existing rule.
For instance,
#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}
Hope this helps.
For change the current active link color we can use code in external css file or inline css
.active a
{
background-color:#ff0000;
}
// Fix navigation menu active links
$(document).ready(function(){
var path = window.location.pathname,
link = window.location.href
;
$('a[href="'+path+'"], a[href="'+link+'"]').parent('li').addClass('active');
});
$(function (){
$('nav ul li a.sub-menu').each(function(){
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/')+1);
var url = $(this).attr('href');
if(url == current){
$(this).addClass('active');
};
});
});
Try changing your CSS to .item-109 { color: white !important; }.
Here's a link with more information on !important.
If you want to globally change the link colors (or pretty much anything else), create a customized download: http://twitter.github.io/bootstrap/customize.html
In response to your comment, if you want to override the supplied CSS, you need to create a rule that is more specific. So, either create a selector like #my-custom-container .item-109 .current .active or add a !important to your rule(s) for .item-109 .current .active
first add php code in link
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'index') { echo 'active'; } ?>" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'about-us') { echo 'active'; } ?>" href="about-us.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'contact-us') { echo 'active'; } ?>" href="contact-us.php">Contact Us</a>
</li>
</ul>
then in every page