Home>Support>Menu Current Page Background and Text Colours

Menu Current Page Background and Text Colours

By calvins1, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

First, let me say I love the Vantage Premium theme. Most things are so intuitive even for a novice like me and if not you can usually find the answer very quickly in the support forums.

Anyway, to my issue…I have set the Current Page Background and Text to the colours I want and when a top-level menu selection is made this works great. However, when choosing a second-level menu item then none of the menu options appear to be selected. I can sort of understand this because strictly speaking a top-level menu item has not been chosen but it looks a bit strange to have none of the menu items selected. For example, I have a top-level Products Menu item but if the user chooses the second-level Cat Products menu item then I would like the Products Menu Item to appear selected (and the current page background and text change accordingly).

I hope that makes sense.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 10 months ago calvins1

    I’ve just realised that, in the example above, the Cat Products second-level menu item has the current page background and text set when you hover over it. So perhaps there is nothing that can be done and it is proobably working exactly as intended. It just looks a little strange to have none of the top-level menu items selected.

    Thanks.

  2. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi calvins1

    Thanks for your support and positive feedback.

    Perhaps try setting this manually and see if there is any change. Insert the following under Appearance > Custom CSS (Vantage Premium) and edit to your colors:

    /* Vantage Current Menu Item Colors */

.main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_item > a { background-color: #000000 }
.main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_item > a { background-color: #000000 } 
.main-navigation ul li.current-menu-item > a, .main-navigation ul li.current-menu-item > a [class^="icon-"],
.main-navigation ul li.current_page_item > a, .main-navigation ul li.current_page_item > a [class^="icon-"] { color: #ffffff }
  3. 9 years, 9 months ago calvins1

    Hi Andrew

    Thanks for getting back to me however unfotunately this hasn’t made any difference.

    Regards

    Calvin

  4. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for the update. Please send through a link to your site and we’ll take a look ASAP.

  5. 9 years, 9 months ago calvins1

    Hi Andrew

    The website is https://all4paws.co.uk

    Taking the Products Menu as an example, if you click on a sub-menu item when that page opens up none of the main menu items are highlighted but the sub-menu item is, which I can sort of understand but it just looks a little strange IMHO.

    Thanks

    Calvin

  6. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Sorry for the delay here. I see now, this can be done using:

    .current_page_parent

    I’ll hit this ASAP tomorrow. Apologies again for the wait.

  7. 9 years, 9 months ago calvins1

    Hi Andrew

    Updating the custom CSS you provided to use current_page_parent instead of current_page_item seems to do exactly what I need.

    Thanks for all your help.

    Calvin

  8. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Sorry for the delay here. Really glad to hear that you were able to resolve. Thanks for the effort.

    All the best.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More