Header Menu as Text Element does not show up correctly on Mobile

Hi athemes Team,
I have made some custom css adaption on the visibility of the header menu. One thing is, that I placed the Menu and Contact Item inline to have the same appearance of the header menu on desktop as well as on any other device. Therefore I hided the hamburger menu button and only a text menu is showing up like on desktop.

used the following css additions:

div.col-md-8.menu-container {
display: inline;
}

.menu-btn {
	display: none;
}

.menu-btn-toggle {
	display: none;
}

Everything looks fine and works good, except one thing. On mobile devices especially iOS no matter which version the Dropdown of the menu does not open. Contact Button works fine. On Android, at least on my mobile, the menu dropdown/hover is working properly.

Do you have an idea how to solve that?

Meanwhile I am working with the hamburger menu until I found a solution.

Thank you. would appreciate your assistance.

Link for Website is provided via PM.

Hello,

It looks like this issue requires some coding and testing on different screen resolutions and devices, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork.

Kind Regards, Roman.

Hi Roman,
thank you for your reply. I was afraid it would be not that easy. Only iOS is always problematic. On Android it works the same way as on desktop.
So, I have to switch to hamburger menu.

But - aehm, maybe, do you have an easy solution to just display the hamburger menu on iOS Devices, otherwise the desktop menu?

Nope, I don’t think that there is an easy way to do it either :slight_smile:

Kind Regards, Roman.

Okey, no worries. Appreciate your fast responses. Keep on the good work!

1 Like