Problem with multiple languages and menu's in top headerline.

I got a problem using Woodmart/WPML with regards to language switching.
My design requires to have the language flags (DK and SE) only, in the top header line, without any menu selection other than the language flag/name option.
This works fine for the main landing page (DK).

But when I am selecting the alternative language (SE) in a client browser, it seems like the “Mobile menu” is shown in the Header line, when the SE landing page is shown.
When I am doing an ‘Inspection’ in a client browser, I can see the “Menu-sprog-container” class is used when viewing the main landing page (DK) whereas when viewing the (SE) page the “Menu-mobile-navigation-container” is used.
Is matches with my tests, when changing the mobile menu content, it is reflected in (SE) landing page header, even the page is shown in standard screen size.

I have followed various guides in this respect.
a) Created two Headers (one for DK and one for SE) in Woodmart Header builder, each with an Secondary Menu widget placed in the top header line.
b) Having two landing pages, one for each language – each using the dedicated Headers (from a) , in section “Header Options”
c) Made a Menu Language switcher in WPML with two entries (DK, SE) – pointing to a ‘sprog’ menu, an empty place holder, used as well by the two Secondary Menu widgets in a). see below.

Any clues or hints ?

Michael

Attachments:

You must be logged in to view attached files.

Hello,

WPML provides the option to create a widget of the language switcher.

1. Create a sidebar and call it language switcher in the Dashboard > Sidebars/

2. Create the language switcher with the flags only https://prnt.sc/smhe9b

3. Create an HTML block, insert the Widgetized Sidebar element, chose the appropriate sidebar from the drop-down.

4. Insert the HTML block to any place of the page: https://xtemos.com/docs/woodmart/html-blocks-2/

You will get your flag switcher without a menu. If you need to show the menu in the mobile menu, you can either assign a language switcher to the mobile menu or add HTML block to the Mobile menu widget area.

Hi Elise

Thanks for quick response and solution – must appreciated !!
Only drawback, is that the language flags are not aligned with the other element of the header (‘Send en besked’) .
Any suggestions or hint about to fix this ? – is much welcome.

Thanks

Michael

Hello,

Enter the Widgetized element and set zero in the paddings/margins https://prnt.sc/smti3l

Then I will provide custom CSS to improve.

Best Regards

[Author]

Posts