This is the code i'm using to make the pills in my navbar active..
<ul class="nav nav-pills">
<li class="<%= 'active' if current_page?(root_path) %>"><% yield (:home)%><%= link_to "Home", root_path%></li>
however it uses the default blue color as "active" how should i change this?
this is what i have in my css already
.nav>li>a:hover,
.nav>li>a:focus{
background-color: #5c8a36;}
even with this (the color should be green) it still shows up as the default blue color
Add the following line (.nav>li>a.active,) to your css:
.nav>li>a.active,
.nav>li>a:hover,
.nav>li>a:focus {
background-color: #5c8a36;
}
You don't have a <a> there!
.nav>li:hover,
.nav>li:focus,
.nav>li:focus {
background-color: #5c8a36;
}
<ul class="nav nav-pills">
<li class="">
Home
</li>
</ul>
The accepted answer didn't work for me. I changed a bit and now working.
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #5c8a36;
}
Related
First question at StackOverflow.
I've been busting my head to figure this one out.
My main menu options (# gabrielpinto.pt) are made of text and icon (FontAwesome).
I want to change the hover color of the icon WHEN I'm hovering the written link.
Here's one of the menu option's markup:
<nav id="site-navigation" class="main-navigation col-md-8" role="navigation">
<div class="menu-menu-principal-container">
<ul id="menu-menu-principal" class="menu nav-menu">
<li id="menu-item-24" class="fa-street-view menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-24">
Gabriel Pinto
</li>
</ul>
</div>
</nav>
I'm just a beginner in HTML and CSS, and I've tried a lot of different rules but without any positive result.
Example:
a.fa-street-view:hover li::before {
color: #bc4676; }
What CSS rule will make it work?
This would work:
.fa-street-view:hover {
color: #bc4676;
}
Here is an example:
http://jsfiddle.net/gtr45hk7/
Edit
I added the .fa class to .fa-street-view in your html to make the example work.
Edit 2
I just looked at your site. Try this:
.main-navigation li:hover::before {
color: #bc4676;
}
If you want to match the link transitions, this might do the trick:
.main-navigation li::before {
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
Here is example for my code
<style>
.hover:hover,.active{color:red}
</style>
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
If you mouse over on blog, there will be two red words
i am trying to find a way to disable "home" when you mouse over any other word
and then it back red if you moved the mouse away
After long search with google, i finnally found javascript code
And tried to modify it to work, but no luck
Here is a pure CSS solution, that will work so long as you have a wrapper element for there li's, which you should.
<style>
.menu:hover .active {
color: black;
/*reset the color to the default*/
/*you could also use color: inherit*/
}
.hover:hover,
.active,
.menu:hover .active:hover {
color:red
}
</style>
<ul class="menu">
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
</ul>
One thing I am noticing right off is the improper markup
there is no
that may not have anything to do with it.
<style>
.hover:hover,.active{color:red}
</style>
<ul>
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
</ul>
not exactly sure what you are trying to do
here is a fiddle http://jsfiddle.net/happymacarts/tfqw93tk/
maybe paste the js code you found and see if we can figure out your issue
I would like to disable the nav-pill hover effect on just one item, the link that changes the language of the page, in my navbar. What is the best way to achieve this using either a bootstrap class or CSS?
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right">
<li class="language language-active disabled">NL</li>
<li class="language language-nonactive language-right">EN</li>
<li class="approach-li">Diensten</li>
<li class="about-li">Over ons</li>
<li class="qa-li">Vragen</li>
<li class="about-li">Contact</li>
<li class="navbarpadding">
<form action="afspraak.html">
<button class="btn navbar-btn btn-primary2">Afspraak maken</button>
</form>
</li>
</ul>
</div>
Looking at your html using the class: ".language-nonactive"
You can these styles to go along with it, this will remove the hover of the grey background:
.nav>li.language-nonactive>a:hover, .nav>li.language-nonactive>a:focus {
background-color: transparent;
}
Here is a jsfiddle to show what I've done:
http://jsfiddle.net/ho1sgm1e/
Additionally you could you something like this with jquery:
$(document).ready(function() {
/*disable non active tabs*/
$('.nav li').not('.active').addClass('disabled');
/*to actually disable clicking the bootstrap tab, as noticed in comments by user3067524*/
$('.nav li').not('.active').find('a').removeAttr("data-toggle");
});
source: Bootstrap tabs pills disabling and with jQuery
Furthermore, utilising the disbaled class will effectively disable the button.
Using CSS:
.nav .language-nonactive a:hover {
background:rgba(0,0,0,0);
}
Demo
Situation, such a menu:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
When I hover "LANGUAGES" I need to show up the other :
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
Necessary to make it work on CSS, JQuery or without JavaScript. Here's a version does not work:
.hover_top_right_menu {
display: none;
}
It's a wrong line
.top_right_submenu: hover, hover_top_right_menu {
display: visible;
}
You have some typos in your css
by default the element .hover_top_right_menu should have display: none. When you hover the submenu then you change its display (with display: block).
.hover_top_right_menu {
display: none;
}
.top_right_submenu:hover .hover_top_right_menu {
display: block;
}
Anyway this css is based on the assumption that the language list is nested into .hover_top_right_menu element, e.g.:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
As a side notes:
Unless you need to have an action on click event, the link around "LANGUAGES" is not necessary for the example
you're using empty markup, probably for styling purpose only. If you need to have an icon just place it as a background of that list-item (or as content property of its :before pseudoelement)
On 3 buttons at the end of each of my post page, I would like to put a hover color when people are clicking on one of them. Here is an example of the 3 buttons:
In my PHP file, these 3 buttons are located here: Post Page
<ul class="tabnav-widget ui-tabs-nav">
<li class="ui-tabs-selected">
<a class="" href="#tab1-widget">written by</a>
</li>
<li>
<a class="" href="#tab3-widget">Related Posts</a>
</li>
<li class="">
<a class="" href="#tab4-widget">In this Category</a>
</li>
</ul>
But I don't know what CSS class I have to modify and which CSS code to add in order to maintain a hovering color when clicking on one of the three buttons.
I thank you in advance, any help is appreciated.
Change this in the CSS
.tabnav li:hover, .tabnav-widget li:hover {
background: #color;
}
Additionally, if you would like to change the color when the button is pressed down, use :active.
Add something like this:
.tabnav li:active, .tabnav-widget li:active {
background: #color;
}