Trying to style current list item

The theme I am using is Divi

I'm reading this article https://premium.wpmudev.org/blog/how-to-highlight-the-current-page-when-using-wordpress-navigation-menus/

I am trying to get the background to remain activated for the current page I am on. I am dealing with multiple menus. I can get this to work, but it applies the highlight to all menus, not just the one in my sidebar.

Do I need to add a class to each menu item? The name of the menu is Free Course

If you need to get into the site to see more, let me know.

Thanks,

ME

  • Vaughan
    • Support/SLS MockingJay

    Hi ME Admin

    Hope you're well?

    I would need to see the page to be able to give you more precise info on this, however, you say when you add the change it affects all the nav menu's and you only want to target the menu in the sidebar.

    In that case, could probably add .sidebar to the beginning of each rule.

    So according to that article:

    If your theme supports the creation of multiple navigation menus, then you’ll need to be a bit more specific in your CSS if you want to have them styled differently. You can use Firebug to find the unique ID of your unordered list. It will contain the name you gave to your menu. If you have other menus with different styles on the page, then you’ll need to differentiate them in your CSS:

    #menu-main-pages li.current-menu-item {
    background: #3FAEA5;
    color:#fff;
    }

    With those simple snippets you should have the basics for highlighting current menu items. Have fun styling your custom menus and let us know if there are any more CSS tutorials you’d be interested to see on wpmu.or

    #menu-main-pages being the unique id, you should find this if you right click on the nav menu and select inspect element in your browser.

    Then look for the id for menu.

    Hope this helps

  • ME Admin
    • The Crimson Coder

    thanks for this is the push i needed in the right direction..

    I got it to work, but the font color wont change to white for some reason, does this mean the font color for that menu is being controlled elsewere?

    #nav_menu-3 li.current-menu-item {
    background: #3FAEA5;
    color: #ffffff;
    }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.