I’m running my main site using Coalition Theme in One Page Portfolio mode and used the One Page Portfolio Builder to edit the menu colours. I have one background colour when you hover over a menu item and a different background colour for the current selected item.

I also have an external link to my blog which also uses Coalition but in Basic Theme mode. I created a menu that is exactly like the menu on my main site (with the links taking the user back to the main site) but with some additional category links within the blog. But as I am running Basic Theme mode, I don’t have the One Portfolio Builder to edit the colours of my menu items. I would like to have exactly the same menu colour schemes in both menus (main site and blog).

Please could someone help me out with this. I’ve seen another thread with a similar question and it seems that entering a quick CSS in the layout and styling tab of Theme Options is a solution. But the code that was suggested (see below) does not give a different hover colour and current item colour, both are the same.

Thanks for your rep^ly. When I added this code, the blog menu item does indeed have the desired background colour. However, the text for this menu item only changes to white when I hover. Otherwise it is grey (#444444). I’m not quite sure why this is happening.

Also, underneath the “Blog” menu item I have three sub-menu items (these are actually blog catagory menu items). Would it be possible to apply the same menu colour background to these too (if selected). At the moment, they have a grey background colour when selected and “Blog” remains green.

As I explained above the WordPress doesn’t apply a “current-menu-item” or “current_page_item” so the only way to set an active state is to reference the ID number which also means it will stay that color throughout the rest of the /blog/ website e.g. clicking on a category.

To combat this, may I suggest setting the category “selected” links to a lighter shade of the Blog’s background color? That way it ties together.