Mobile Menu disappearing too early


#1

Hello,

I recently noticed that when using your theme on mobile phones, the mobile menu disappears way to early. I mean that when the bottom of the mobile menu container has been reached, it’s gone.
You can see it on my website: xs-sol.com


#2

Hello Tanckom,

Please try to use the following CSS code to make your mobile menu shorter.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

nav#mainnav-mobi ul > li.menu-item > a {
    padding-top: 5px;
    padding-bottom: 5px;
}

nav#mainnav-mobi span.btn-submenu {
    line-height: 32px;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#3

Hello Roman,

Thanks for your reply.
This is a workaround however the mobile Menu of Rocked looks after the custom css not beatuiful anymore.

Is there no possible way to keep the size, but make the menu disappear after some px later?


#4

Hello Tanckom,

Well, that’s how mobile menu works, click to expand, and click to collapse.

It’s possible to change, but looks like it requires some coding and testing, 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 freelancer on Upwork.

Kind Regards, Roman.


#5

Hello Roman,

I know this is how the mobile menu works, but in my opinion a good theme’s goal is the have the best user experience with it, and I really don’t feel that the “early mobile menu minimization” is a good user experience. It’s like it took the info away from me before i even reached the bottom.
So you might consider, as a suggestion, to keep the menu open until the user forces it to close, or until a height space of one more menu has been reached.

Could you maybe tell me the localization of the code which does this thing? So I could have an eye on it by myself.

Thanks


#6

Hello Tanckom,

Looks like I did not understand your issue.

Please try this CSS code:

body #header.downscrolled {
    opacity: 1;
}

Kind Regards, Roman.