Responsive menu is not totally collapse on iphone

[sharp_image]

Hi support,

As you can see in the printscreen the menu is not totally collapse on iphones. When you check the menu on desktop and make it reponsive it works fine but on iphone not all the menu and specially sub menu items are visible. Important notice is that the nav menu has always a position fixed for a better overview. Any idea what i’m doing wrong in the css?

Cheers Bouke

[Prasant]

Hello Bouke,

Thanks for asking.

It seems that you have added couple of custom max-width CSS property that is causing the problem https://screencast.com/t/MAIdNeuo1wx. Please remove max-width and that will resolve the sub menu problem on mobiles.

Thanks.

[sharp_image]

Hello,
Thanks for the fast reply. Great service!
When you check the nav menu items on desktop on: https://forevermusic.nl/ you see that there are under “Muziekprofiel” 6 sub menu items. On a smartphone there are only 5 sub menu items visible and it’s not possible to scroll down to the othter menu items. Removing the max-width showed the sub nav items the same zise as the main menu items but not all the menu items, scrolling is still not possible.

Thanks,
Bouke

[ruenel]

Hello There,

I have logged in to your site and I found out that you were having this issue because of your custom css which resulted to a conflict in the mobile sub menu. You have added a code like this:

.x-navbar-inner {
    min-height: 60px !important;
    position: fixed;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #0D3A5E;
    top: 0 !important;
    }

It makes the navbar position as fixed and removes the ability for you to scroll over the mobile menu items. Please remove this code first because it does not help and will resolve more and more issues later on. We can just start a new set of custom css to make your mobile menu in a fixed position.

Please let us know how it goes.