Horizontal menu style across multi language

Ask the community
,
1

Hi all,

due differences between Japanese (Kanji) and English (Latin) characters set, I need to set different text size in the horizontal menu for each language in order to fill out the menu nicely.

Unfortunately, font & font size in a horizontal menu, are set the same for all languages and cannot be customized for each one of it. That’s the issue !

In the example below, I’ve found the best compromise I could, “Avenir light , 12px.” But, as you can see, Japanese version looks too small with empty space to the right while English one, looks pretty good.

menu in primary language Japanese :

1006×88 7.46 KB

menu in English :

1006×88 6.9 KB

According the following post, it is suggested to use “text or button elements” to get full control:
https://www.wix.com/corvid/forum/community-discussion/editing-wix-horizontal-menu-with-code?origin=auto_suggest

Although it works, the solution requires some code repetition for each text element for custom styling:

import wixLocation from 'wix-location';

$w.onReady(function () {
 	let baseUrl = wixLocation.baseUrl;
    
 	if (baseUrl === 'https://www.sitename.com'){ // get my Japanese version
        	$w("#text25").html = "<h4 style='color:#ed1c24'>Menu Item 1</h4>";
		...
    	}
});

Not to mention onMouseIn, onMouseOut event handlers to add for (2 x each menu item), if you want text changing color :

export function text25_mouseIn(event) {
	$w("#text25").html = "<h4 style='color:#ed1c24'>Menu Item 1</h4>";
}

export function text25_mouseOut(event) {
	$w("#text25").html = "<h4 style='color:#0c29b5'>Menu Item 1</h4>";
}

Is there any other more elegant and short way to achieve this ? Buttons would be a better solution but according API’s documentation, there’s no such HTML properties to change text style (https://www.wix.com/corvid/reference/$w.Button.html)