Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #12956


    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.

    #top .main_menu a:hover, #top .main_menu .current-menu-item > a, .main_menu .current_page_item > a {
    color: #FFFFFF;

    .main_menu .section-home.current-menu-item a, .section-home .section_bg{
    background-color: #32333D;

    div .main_menu a{

    .main_menu a:hover, .main_menu .current-menu-item>a, .main_menu .current_page_item>a{

    Also, is it possible to have the small coloured bar which sits inbetween the menu and the content on a Basic Theme page? I suspect this may be a feature only available in One Page Portfolio mode?

    My main site – (with menu as I want it)

    My blog – (with menu not as I want it)

    Thanks in advance for your help…


    Hi ColinHunter,

    Try this for the hover:

    .main_menu a:hover {
    background-color: #546B0A;

    The current color for the menu item “Blog” is a bit tricky because WordPress isn’t applying the class name “current-menu-item” or “current_page_item” so instead you’ll have to use this:

    .main_menu #menu-item-1220 a {
    background-color: #444444;

    Hope this helps!




    Hi Mya,

    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.

    Kind regards,



    Hi Colin,

    Apologies for the delay in responding.

    I forgot to include the div before .main_menu so use this:

    div .main_menu #menu-item-1220 a {
    background-color: #546B0A;
    color: #FFFFFF;

    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.

    Here’s the code you would use:

    .main_menu .current-menu-item > a {
    background-color: #546B0A;
    color: #FFFFFF;

    Of course you would change the background-color to whatever color you want to use.




    Great stuff. Thanks for the solution Mya!


    Glad that worked for you :)

    Let us know if you have any other issues and we’ll do our best to help!



Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Coalition Basic Theme Menu Colours’ is closed to new replies.