Responsive Menu doesn't work properly

Hello,

my responsive Menu doesn't work properly on smaller devices.

In the template configuration > Layout builder the positions "top 2" "logo" "top 3" have not been changed (exampledata). So they should have enough space as it works properly on your demo version. In addition I just have 2 menue titles instead of 3 (on each side of the logo). The logo-size should be the same as well.

Unfortunately, it doesn't work properly on smaller devices as you can see in the screenshots (menue is generated in 2 rows). Screenshot attached.
SG2 800 x 480 // 480 x 800
Laptop 1366 x 768

In my opionion, it doesn't depends on the typo size because it seems to be enough space. I tested it by changing the size (in layout.css @media), but it didn't generate a single-row-menue.

I would appreciate some help.

If you open layout.css you will find several screen width dependent rules:

@media (max-width: XXXpx) {
....


If your site does not behave well with default definitions you can tune them.

menu UL classes are:

.mnu_topmenuleft and .mnu_topmenuright