Main menu item hover color, svg icons doenst load propely

Dear Xtemos team,
I have some issues to fix, for example:

1.Change color of menu item on hover, bcs there is no option to change it on header builder. (find in attached image with hint nr.1)
2. Mozilla browser doesn’t load some of category svg icons (find in attached image with hint nr.2)
3. Opera + Microsoft Edge is not showing menu items properly, when I add 9+ menu items (You can check by yourself http://www.cheap-shop.ch)

Attachments:

You must be logged in to view attached files.

Hello,

First of all thanks for choosing our Theme, we are glad to be you in WoodMart WordPress family :)

To change the color of menu item on hover you can use the below CSS code. You need to go to Theme settings >> TYPOGRAPHY >> ADVANCED TYPOGRAPHY select “Main Navigation Links” and then select a color for “Color on hover” option.
Screenshot : https://jmp.sh/JDTGUpP

As the mozilla browser doesn’t load some of category svg icons. Try your icons in .jpg or .png format because most of the times the issue is SVG file code, due to extra small or extra large height and width SVG icons not shown.

In Opera and Microsoft Edge, your menu items not showing properly when you used more than nine items in the menu, because the zoom level of those browsers might be greater and then the nine items did not fit in a single row and goes to the next row. To fix this try to use less quantity of menu items.

Best Regards.

Hi back,
1. Thnx
2. If I put png icons, how they would show on mobile and category sectors??
3. Quite polite and diplomatic answer lol, but I am not that naive to be confused with browser zoom. PLEASE provide me with a proper solution to add more than 9 items, bcs this option is more than neccesary for me right now.

Hello,

Most Welcome.

PNG format supported in the mobile versions also, Just try your icons once and get back to us if they are not showing.

The only way to display more than nine items in a single row is by making the font smaller. Try a smaller front for your menu items go to Theme Settings>> custom CSS >> global custom CSS area, put the below code:

.menu-main-navigation li a .nav-link-text{
font-size:10px;
}

Best Regards.

[Author]

Posts