Two Icon Section for Menu Item

[tomr96]

Hi there,

When trying to change the menu icon from hand pointer to another icon I am coming across an issue whereby it will change back to the hand pointer no matter what I pick.

I am also seeing two sections that are identical under the menu toggle under Appearance.

I don’t quite understand the difference between the two as they are literally the same, see screenshot.

Would someone be able to explain this?

Thanks, Tom.

[marc_a]

Hi Tom,

Thanks for reaching out.

This is a bug in our theme about having two icon section in the menu items and our developers are already well aware about the issue. This issue is already fixed in our beta theme and once they are able to check all the bugs in our beta they will officially release the theme. You can download the beta theme in your themeco account and test our beta theme in your staging environment.

Hope that helps.

Thank you.

[tomr96]

Thanks for the response here, so there is this bug and two show up, but is there a way to change the icon on the menu or not now using stable?

Thanks.

[prakash_s]

Hi Tom,

You can use this trick to show an icon with a menu as a temporary solution, go to Appearance > Menu expand your menu item and replace the menu item label with the following icon code with menu name in the Navigation Label field:

For example

Sample Page <i class="x-icon x-icon-lock" data-x-icon-s="" aria-hidden="true"></i>

You can find the icon code here: https://fontawesome.com/icons?d=gallery

Hope this helps!
Thanks

[tomr96]

Thanks for this.

Is there a way to make the icon go above the menu link?

Screenshot shows the coded menu item top, and the default menu item in Pro Modal at the bottom.

Thanks.

[prakash_s]

Hi Tom,

To show the icon on top of menu item add the icon code first, then add a <br> tag, then the menu title

<i class="x-icon x-icon-lock" data-x-icon-s="" aria-hidden="true"></i><br>Sample Page

Then add this CSS code in the theme option’s CSS

    .x-menu-inline .x-anchor-text-primary{
    text-align:center;
    }

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[tomr96]

Thanks for this, I will add this code into my site.

Thanks.

[ruenel]

You are most welcome!