Css code to change the buddypress main menu icons when hoovered

Hi guys,

I would like to ask you would it be possible to come up with a css code to change the BuddyPress main Menu icons so that they would change the colors when hoovered over.

Right now I am using the KLEO theme and the colors of the BuddyPress icons are light grey and dark grey when hoovered over.

Thank you for your help

  • Ken Kimbrell

    Hello Tom-

    I understand you are looking to have the anchor elements in the menu list-items a lighter grey when hovered over? Happy to help! Considering you continue to use the same menu, we can take the ID of the ul(un-ordered list) then descend into the anchor element, attach a psuedocode of hover and apply a nice little transition effect. See code below:

    ul#menu-mega-menu a:hover {
        color: rgb(119,119,119);
        transition: color ease .5s;
    }

    Let me know how this works for you!

    Take Care,

    Ken - WPMU DEV Support

  • Tom

    Sorry, maybe I wasn't clear enough about the change i am looking for. I want each of the icons "activity", "profile" etc. to change color when hoover over to different colors. "Activity" would be green when hoover over, "Profile" would be orange etc. I would set colors later on.

    I will assume that I should paste this code to Child theme css file, is that right?

    "Considering you continue to use the same menu, we can take the ID of the

    (un-ordered list) then descend into the anchor element, attach a psuedocode of hover and apply a nice little transition effect."

    I'm not really getting this part so I if I could ask you to explain it to me like to an amature I would appreciate it :slight_smile:

    Thanks for your help

  • Ken Kimbrell

    Hello Tom-

    I do apologize for the misunderstanding. There is a way to target specific menu items, by adding classes to each one. You would want to go into your wordpress dashboard, and in the left pane find Appearance > Menus.

    Then make sure, you are on the correct menu.

    After that you will want to go into the upper right hand corner find, "Screen Options" then click on the dropdown to see available options. Here you will want to make sure "CSS Classes" is ticked.

    Now go to a menu item that you want to change the color of when hovering over. In my example, I am changing the color of the home text when hovering over the anchor element, however this should work for icon only menu items as they still act as anchor elements.

    Here I am going to add an extra class to the "Home" menu item. I will call the class home_color.

    Now I can use that class to individually target the menu item and change the color to whatever I want. See photo below:

    The code I would use to target the element in this example would be:

    .home_color a:hover {
        color: green !important;
        transition: color ease .5s;
    }

    You may have to use an "!important" rule to make sure that effect is applied irregardless of how the styles cascade.

    Just make sure to use the right class name that you assigned to each menu item and change the colors as you want. All classes must start with a (.)

    For example, if I was to assign the activity menu item with a (blue_color) class. In the style sheet I would call that class by using (.blue_color{color:blue;})

    I will assume that I should paste this code to Child theme css file, is that right?

    Your assumption is correct. These styles would need to be applied to your child theme's style.css file, this makes sure that when your theme is updated the styles are not overwritten.

    Let me know how this works for you!

    Take Care,

    Ken - WPMU DEV Support

  • Ken Kimbrell

    Hello Tom-

    This method will only apply to the menu items and the classes you set. If you would like to give me support access, and tell me the colors of the icons you want to change. I could point you in the right direction and make notes in the css of which selector targets which icon.

    You can grant us access via WPMUDEV Dashboard plugin, there's no need to share credentials. Here's our detailed documentation page about it:
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-4

    Let me know how I can help!

    Take Care,

    Ken - WPMU DEV Support

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.