Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

help customizing The color of the text in the main menu WordPress

  • REFUNDED

hi there website is [[LINK href="https://ezchoicefinancial.com"]]https://ezchoicefinancial.com[[/LINK]]

i have already customized the main menu on this theme ( infocus theme) via custom css and skin.
it is almost perfect . i was wondering if there is a way ( whether by injecting custom css in my theme or another way ) where i can have each "<strong>menu text</strong>" have a different color . see image attached .

in other words :
<em>Credit Service</em> i would like the text to be yellow
<em> Credit Education</em> I would the text be Blue
<em>Why EZ Choice</em> i would the like the text to Grey
<em>Testimonial</em> i would like to text to be orange
<em>Contact US </em>text to stay white
<em>Our Blog</em> i would text to be Red
<em>Enroll Now</em> : text to Stay White

Also is it possible that when hovered over the menu that the text become "<strong>white</strong>" on all the menu items above?

Right now my theme lets me control the menu text color and make it the same for all of them . it doesnt let me have different text color for the different menu items and doesnt let have the text color changed when hovered .

so all in all , i want the the different menu items to have different text color when they are not being hovered over and when i hover over them to all have the same text color white .

hope im making sense

Answers (4)

2012-08-31

Michael Caputo answers:

Try out this code in your CSS:


ul#memu-top-menu li#menu-item-255 a{color:yellow;}
ul#memu-top-menu li#menu-item-879 a{color:blue;}
ul#memu-top-menu li#menu-item-687 a{color:grey;}
ul#memu-top-menu li#menu-item-1448 a{color:orange;}
ul#memu-top-menu li#menu-item-1444 a{color:white;}
ul#memu-top-menu li#menu-item-1724 a{color:red;}
ul#memu-top-menu li#menu-item-552 a{color:white;}
ul#memu-top-menu li a{color:#FFF;}
ul#memu-top-menu li#menu-item-255 a:hover,
ul#memu-top-menu li#menu-item-879 a:hover,
ul#memu-top-menu li#menu-item-687 a:hover,
ul#memu-top-menu li#menu-item-1448 a:hover,
ul#memu-top-menu li#menu-item-1444 a:hover,
ul#memu-top-menu li#menu-item-1724 a:hover,
ul#memu-top-menu li#menu-item-552 a:hover{text-decoration:none;color:white;}


Sam Nasr comments:

i did nothing changed

2012-08-31

Arnav Joy answers:

you can do it using jquery

<script>
jQuery(document).ready(function($){
$('ul#menu-top-menu').find('li').eq(1).find('a').css('color','yellow');
$('ul#menu-top-menu').find('li').eq(2).find('a').css('color','blue');

// and so on


// if you are having span in li element then

$('ul#menu-top-menu').find('li').eq(1).find('a').find('span').css('color','yellow');
$('ul#menu-top-menu').find('li').eq(2).find('a').find('span').css('color','blue');



});
</script>


Sam Nasr comments:

i tried both formats

kind of worked but not really . here is what i entered in my custom javascript area of my theme :

jQuery(document).ready(function($){
$('ul#menu-top-menu').find('li').eq(1).find('a').find('span').css('color','yellow');
$('ul#menu-top-menu').find('li').eq(2).find('a').find('span').css('color','blue');
});


check the behavior only the first menu " CREDIT SERVICES turned yellow . when i hovered over it stayed yellow as well and didnt turn to white. am i missing something ?

Also instead of wording the color as yellow in jquery command can i use hex code ?


Arnav Joy comments:

yes you can use hax values


Sam Nasr comments:

ok but like i said only the one menu button ( credit services) is turning yellow and it takes few seconds to happens ( delay) cause it is jquery and i have to hover the menu to activate the color for whatever reason other otherwise the color stay white .

the second button ( credit education didnt turn blue ) although the command says blue.

i really dont think it is working properly

2012-08-31

Abdelhadi Touil answers:

Hi.
If you are using Wordpress Navigation menu then it's easy, just add a css classes to each menu item like described in this tutorial (especially adding css classes to each menu item):
[[LINK href="http://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/"]]http://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/[[/LINK]]
then you can add your desired style in your style file.
Hope this helps you.
Good luck.


Sam Nasr comments:

yes, i think it is wordpress navigation menu . ill take a look shortly at the article. im not expert on css or php at all so im not sure even if i read the article ( which i did skim over it real quick ) that i will be able to implement it .

i wouldnt mind paying a little more if i can get help implementing this article


Abdelhadi Touil comments:

If you want, I can do it for you, just contact me and you are welcome :)


Sam Nasr comments:

i just sent you a message here. i think css might be a better solution than jquery because there would be no scripts to load

2012-09-01

harry hor answers:

Hi

Please check below css code & add it on style.css



ul#memu-top-menu li#menu-item-255 a{color:yellow;}

ul#memu-top-menu li#menu-item-879 a{color:blue;}

ul#memu-top-menu li#menu-item-687 a{color:grey;}

ul#memu-top-menu li#menu-item-1448 a{color:orange;}

ul#memu-top-menu li#menu-item-1444 a{color:white;}

ul#memu-top-menu li#menu-item-1724 a{color:red;}

ul#memu-top-menu li#menu-item-552 a{color:white;}

ul#memu-top-menu li a{color:#FFF;}

ul#memu-top-menu li#menu-item-255 a:hover,

ul#memu-top-menu li#menu-item-879 a:hover,

ul#memu-top-menu li#menu-item-687 a:hover,

ul#memu-top-menu li#menu-item-1448 a:hover,

ul#memu-top-menu li#menu-item-1444 a:hover,

ul#memu-top-menu li#menu-item-1724 a:hover,

ul#memu-top-menu li#menu-item-552 a:hover{text-decoration:none;color:white; background:none;}


.jqueryslidemenu > ul > li > a:hover {
background: none!important;
}


Sam Nasr comments:

i dont think this worked , it kill my orange hover effect that i had on the main menu and i didnt produce any colors for the main menu