Jump to content
Sign in to follow this  
Gavin_

different colours in navigation

Recommended Posts

Gavin_

Hi we would like to give each menu item in the navigation a different colour have tried a couple of variations but none successful yet... any ideas? this is what we are aiming for http://www.guardian.co.uk/ thanks for help

Share this post


Link to post
Share on other sites
Rob

To do that, each menu item must be in a separate class, where the class is specifically styled in custom CSS. I'd suggest you reach out to hello@pagelines.com for a quote from a Pro as this requires some customization of code in order to include the custom classes in the menu.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Gavin_

can i not even get a clue?

Share this post


Link to post
Share on other sites
Danny

Hi Gavin, If you use Google Chrome Dev console (Press F12) or Firebug, you can find the individual ID of each menu item. An example of this would be the follow code:

li#menu-item-12345 {background-color:#FF0000;}
	li#menu-item-13245 a {color:lime;}
You will have to find the IDs yourself, as there specific to your menu, so replace the 12345 from the code above with the menu ID and simply code and paste until your whole menu is completed. So lets say for example, you have 4 menu items, your code would look something similar to this:
/* Custom Menu background and link colors */
	li#menu-item-1 {CSS goes here!}
	li#menu-item-1 a {CSS goes here!}
	
	li#menu-item-2 {CSS goes here!}
	li#menu-item-2 a {CSS goes here!}
	
	li#menu-item-3 {CSS goes here!}
	li#menu-item-3 a {CSS goes here!}
	
	li#menu-item-4 {CSS goes here!}
	li#menu-item-4 a {CSS goes here!}


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Gavin_

Thanks Danny (Superstar) will try it out.

Share this post


Link to post
Share on other sites
Danny

No problem Gavin, I just read my post again and its not the menu id, its the Menu li ID you want to find! Also, if for some reason it doesn't work, try adding !important like so:

li#menu-item-12345 {background-color:#FF0000 !important;}
	li#menu-item-13245 a {color:lime !important;}


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
zcademy

This worked perfectly for me, on the first try, even! Thanks!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×