Incorrect display of language switcher

[PeterU]

Hello, I am facing the following problem: so far we have used the standard header with the standard menu on our website. A special feature is the language switcher at the end of the menu. This language switcher consists of a flag and the country name. The plugin for this comes from the manufacturer LINGUISE. Everything works perfectly and is displayed correctly.
I have now created a new header with a new menu bar for our website. Unfortunately, the language switcher is no longer displayed correctly. Neither in the desktop nor in the mobile version. You can clearly see the error in the images. The old standard menu is still running on our website, at https://flashaar.de/testseite you can see the new menu in action. Why is the display in the new menu faulty if it works perfectly in the old menu?

Kind regards

Peter

[marc_a]

Hey Peter,

Thanks for reaching out!

Would you mind sharing the page URL where the old menu is present? In that way, we can inspect and compare the code properly. Note, the page URL you’ve added above is the URL with the latest version of your header design.

Thank you.

[PeterU]

Hello Marc,
the (old) standard header is still running on our entire site https://flashaar.de/ and all subpages. I created a test page especially for the new header and assigned the new header to this page: https://flashaar.de/testseite/. Here you can clearly see the faulty desktop/mobile display. During my tests, I was able to minimize the error with CSS, but I can’t quite get it right. I also have a problem with Cornerstone displaying some of the content differently than my browser. Thank you very much for your help!

Kind regards

Peter

[marc_a]

Hey Peter,

Upon checking and comparing both website, the header for the old and new website have different HTML structure that’s why the language switcher is showing differently. Also, the language switcher HTML structure is different from the other menus. With that said, you need to add this CSS in your Bar element CSS.

$el ul li:last-child a {
	padding-top: 1.8em;
    padding-bottom: 1.8em;
    flex-direction: row;
    align-items: center;
}

This is the result:

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

[PeterU]

Hello Marc, thank you very much for your help. But I’ve already been this far. But I’m still not satisfied with the answer. Everything works fine in the standard menu, and it used to work the same way in the X theme. In the PRO theme with its extended possibilities and great features it should no longer work? With your solution, the particle effect at the top does not work with the language switcher. The same applies to the mobile menu. It is also possible that the code of the Linguise Language Switcher is not optimal and does not match the way PRO displays the menu. I’ll take a closer look at the problem now and see if I can make any progress.

Kind regards

Peter

[marc_a]

Hey Peter,

Great and let us know how it goes on your end.

Thank you.