How to Edit Colors and Icon in a Menu

Change colors

To change the background colors of the icons used in a menu, you’ll have to use some css classes.

Here are the CSS classes to use:

To add one of those CSS classes to use a different color, you’ll have to go to Dashboard > Appearance > menus and select the right menu. Then, you can add the CSS class to the CSS Classes field. In case this field is not displayed, you’ll have to enable it by checking the “CSS Classes” box in the Screen Options.

Each CSS class will have a specific color. You can change their attributed colors in the Customizer by visiting Appearance > Customize > Community. You will find 6 color pickers among which 5 will affect these classes:
Love Buttons Color -> primary
Message Buttons Color -> info
Success Buttons Color -> success
Delete Buttons Color -> danger
Miscellaneous Buttons Color -> (default)

Please note that these colors changes will impact other components of your theme, like the BuddyPress action buttons in your members directory page.

Change icons

You can also change the icons by choosing one of the following if necessary: https://fontawesome.com/v4.7.0/icons/
For example, just replace fa fa-lock by fa fa-bell to display a bell icon instead of the lock icon.

Here is some exemple of the HTML markups to can use
<span class="icon-wrapper"><i class="fa fa-lock" aria-hidden="true"></i><span class="h5 d-block">Menu Item</span></span>
<span class="icon-wrapper"><i class="fa fa-bell" aria-hidden="true"></i><span class="h5 d-block">Menu Item</span></span>

For quick demo, please give a look to the following video tutorial: https://youtu.be/IUDVjGCPo4I

Other icons are available regarding the theme you use. We wrote an article about it:

Going Further

How to edit the text in a menu?

The text in some sections will not be editable in the classic page builder. The reason is that they are in a menu displayed thanks to Grimlock Menu block.

How to Customize the “Cities” Grid Menu ?

To edit this section, you need to edit the “Cities” menu. Thanks to the Menu Image plugin and Grimlock plugin, this menu is displayed with featured images and texts to make it more appealing.

Not Finding
What You Are Looking For?

Simply go to our support forums and describe the problem you are facing.
We will be happy to help you!

Discover MatchPress

Skip • Like • Super-Like

Add powerful matching features like Member likes, skips, super likes, conditional private messaging and much more.