Mobile Menu Buttons Letter scramble

Support
#1

hi there,
when i open on my iphone the submenus in my mobile menu the buttons are not being displayed properly below each other but on top of the main menu buttons. at least it looks like it. please see attached screenshot.
also you see the first main menu item with a red background which is only visible on my iphone but not in the desktop version of the mobile menu (when i narrow the browser window down to mobile size) where it is grey.
could you help me to fix that?
also: can i not copy or move one row form one section to another section?
thanks a lot! kai

#2

Hi @iTurtle,

Thanks for writing in.

I have tried your setup and it is working well.

https://scontent.fcgy1-1.fna.fbcdn.net/v/t34.0-12/30008092_10212251193734881_197895905_n.jpg?_nc_cat=0&_nc_eui2=v1%3AAeHqzm-hnLpd6Mker7-kgRGWGSG-JrRIFoand_P43xGhm6O7VqhStRzX9uFzKx7LPKe7xMLJC05v3DkdeFgpCTiMVMLZaMpm-fjAvLeOl2fOnw&oh=a5c56405b428c6e16b02fedacd1590a9&oe=5AC78494

Yes, You could not be able to transfer a row from section to section.

Thanks.

#3

thanks @nico,

thanks for testing. the thing is also my customer and a friend of mine who i asked experience the mentioned problem with the mobile menu. it happens always the first time you tap on a main button like “Was”. after tapping here and there afterwards the problem seems to disappear. but we all have this problem. could you please look into this again?

i am sorry but i do not understand your reply to the rows moving between sections. is it possible or not?

thanks a lot! kai

#4

Hi There,

I tested in an iPhone 6s with latest OS and the menu is just working fine.
Can you please confirm your OS and browser.

Thanks

#5

hi @basanta,
thanks for testing.
i use an iphone5s with the latest os (11.3).
i also tested it on a friends iphone 6s (11.3) and it shows the same display errors!
the moment i tap on one of the main menu buttons the submenus are overlapping. even 2 at the same time.
maybe there is a transparent button background? i am unable to find a setting in the headerbuilder to set the background color of the menu buttons.
but that of course does not explain why you don’t experience this error.
thanks again. kai

#6

Hi there,

It works okay on my end too, but based on your screenshot, it appears the sub-menu doesn’t have a height since the background became transparent. Please try adding this CSS to your global custom CSS

@media ( max-width: 767px ) {
.x-menu, .x-menu li {
    background: #fff !important;
}
}

Thanks!

#7

dear rad!
thanks a lot for the fix! it gives the background a color and so the text does not overlap visually anymore :slight_smile:
but:

  1. why did the background became transparent in the first place?
  2. and where can i set the background color in the headerbuilder?
    and:
    now i have to tap a second time to make the submenu disappear before i go to the next submenu. otherwise the one submenu covers the other. please try it out. that can’t be the intended behaviour!?
    thanks again so much! kai
#8

Hi There,

  1. Please see the dropdown tab of navigation dropdown element you’ll see the background option there


  1. Inspect your Bar/Container/Elements background settings will be on the first set of options


That is the behaviour of Dropdown navigation, but I understand what you’re saying I’ll add that to our issue tracker as an enhancement to the Navigation Dropdown element.

Cheers!

#9

hi friech,
thanks for your tips and screenshots!
my settings for all of these where on solid white.

so i still need this code to make it work visually propoerly:
@media ( max-width: 767px ) {
.x-menu, .x-menu li {
background: #fff !important;
}
}

i dont understand why. is that a bug?

also i do not understand that the described problematic behaviour (overlapping submenus) is standard and had to be added to the issue tracker. 10million installations and i am the first one noticing it???
but of course i am glad you are looking into it!

thanks again! best wishes, kai

#10

Hi Kai,

It must be a browser/devices specific issue as I can’t replicate the issue on my end, even if I removed that CSS code above your submenu dropdown still has a white background.

Regarding the Navigation Dropdown behaviour, no it’s not a bug, the thing is multi-level dropdowns was never meant for mobile view, as this will almost always never fit on small screens, we advise users to swap (using Hide During Breakpoints feature) the menu to Navigation Collapsed for mobile.

I just check the report and the enhancement is already in place, stay tuned for the next release.

Have a nice weekend,
Cheers!

#11

dear friech,

i switched now to the navigation collapsed menu. that was a valuable tipp!
it would be great to have such tipps right in the builder when choosing an element. that would have saved me and you some headaches… this way it is not clear which menu is intended for mobile use.

thanks for your help! best wishes, kai

#12

You’re welcome!
We’re glad we were able to help you out.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.