Navigation Menu Icon Control

Support
#1

Hi all!

So I’m experiencing something peculiar. I love that Pro gives an option to natively include icons to menu items but it seems that you either enable all icons or disable all icons.

Meaning, when you have the “Graphic Setup” enabled using Pro’s Header or Footer inspector, all icons selected by default in WordPress menu show up as expected. But it seems you can’t go to each individual menu item and select no icon or a blank entry. An icon is must on all items once enabled?

Either I can’t seem to find the option in the drop down menu that will effectively disable the icon for that menu item or this is just how it is? I was hoping to show icon on one item. I could take the long route by using “display: none” on all icons I don’t want associated with a menu item.

Is this by design?

#2

Hi there,

That is correct if you enable the Graphic Setup you will have an icon for all menu items. A workaround is to go to Appearance > Menus page and from top right section click on the Screen Options and enable the CSS Classes:

Then you will have a CSS Class option for each menu item. Add the class of no-icon to a menu item that you do not want to have an icon:

After that kindly go to Pro > Launch > Theme Options > CSS and add the code below:

.no-icon .x-anchor-graphic {
	display: none;
}

That will do the trick :slight_smile:

#3

Thank you so much for the thorough response. This is a good solution also.

I opted to go with adding the icon tag inline with navigation item. I may resort to using the CSS method since it’s cleaner!

#4

Glad we could help.

Cheers!

#5

So, I could customize the color of the graphic as well through that CSS menu customization, right? And where do I change the actual graphic icon itself? I’m looking all around in this menu navigation inspector and it seems to have the option for everything related to the graphic icon except WHAT that icon is.

#6

Hi There,

The Icons will be set on each Menu Item Appereance > Menu

You have the list of the icons here:

demo.theme.co/integrity-1/shortcodes/icons/

Hope it helps

#7

Thank you for that. I got the icons set now, but I still need to know how to do two things: how do I customize the color of each icon and is there a way to align the icons on the right side of the text?

#8

HI There,

There is no setting in the editor to choose different color for the different menu icons, but you can use custom css for that.
Example:

.menu-item-83 .x-icon {
    color: #50E3C2 !important;
}

Regarding the icon in right side of the text, Please adjust graphics margin to set it in right.

Hope this helps.