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;
}
Related
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;
}
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'm trying to use the wordpress custom menu to allow users to link their social media sites easily. So far I set up a wordpress menu "Social Icons" in my functions.php theme file and am using the custom menu widget to place it on the site. This is the html wordpress generated for the menu and widget
<div class="menu-social-icons-container">
<ul id="menu-social-icons" class="menu">
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73">Facebook</li>
<li id="menu-item-74" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-74">Twitter</li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76">Instagram</li>
<li id="menu-item-77" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-77">Youtube</li>
</ul>
</div>
I'm assuming the id "menu-social-icons" is due to either the theme location or menu name I created so IF the id is based upon that I could use this method to allow users to link up their social media icons. Will the id "menu-social-icons" be the same for any user that uses this theme, or is it a generated id like "menu-item-73" in the li.
If it will be the same, I am trying to style the nth child a elements to backgrounds of the icons but I'm confused as to which selectors to use in css because for example if I use
ul#menu-social-icons li a:link:nth-child(1){
background-img:url(images/facebook.png);
}
ul#menu-social-icons li a:link:nth-child(2){
background-img:url(images/twitter.png);
}
ect
I don't get anything
What selectors do I need to use to style achieve this?
consider to this example http://jsfiddle.net/jogesh_pi/d85Ae/
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
CSS
ul li:nth-child(1) a{ color: #ff0000; }
ul li:nth-child(2) a{ color: green; }
ul li:nth-child(3) a{ color: #ff9900; }
Note: Make sure about the path of images that you want to implement on the menus
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)
I'm using Wordpress and i'm trying to have my navigation display a color for that active navigation link IE a blue link on home when home page selected and a red link on services page when services page clicked.
I'm trying to do this using CSS. The navigation code is below:
<div id="menu-secondary" class="site-navigation menu-container" role="navigation">
<span class="menu-toggle">Menu</span>
<div class="wrap">
<div class="menu">
<ul id="menu-secondary-items" class="nav-menu sf-js-enabled">
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">
Home
</li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
Welcome
</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
Services
</li>
Here is CSS that makes each current active link be yellow.
#menu-secondary li.current-menu-item a {
color: #FFCC33;
}
but i want each page to show a different color.
I'm thinking of something like this, but its not working
#menu-secondary li. menu-item-18{
color: #0F0;
}
You can target a div with an ID and Class active at the same time like so:
#menu-secondary #menu-item-18.current-menu-item a{
color: #0F0;
}
As a sidenote, avoid using the li at the start when using an ID , like:
li.#menu-item-18.current-menu-item
as you're just slowing things down (an ID is already unique so doesn't need the li specified).