Fixed Menu Scrolling Problem

[U238]

Hi. My smartmenu has fixed property (position:fixed in css). Also there are some submenus. On mobile phones when the menu and some submenus are visible, scrolling doesn’t work. Therefore some of menu items and sub menus are not reachable. They are off the screen and because of scrolling not working I am not able to see and click them. When I set the smartmenu’s position absolute, everything is fine.There is a bootstrap example for fixed menu
http://vadikom.github.io/smartmenus/src/demo/bootstrap-4-navbar-fixed-top.html
But the scrolling doesn’t work either if you check it on a mobile phone or small screen.
Is there any way to fix that problem.
Thanks

[garyseven]

Is there a solution to this? I have run into the same problem.

[garyseven]

in case anyone needs this, i figured it out.

there may be a better way, and this may not handle all devices

/*Scroll mobile menu*/
@media (max-width: 767px) {
.overflow-y-menu {
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /* mobile safari */
height: calc(100vh – 85px);
}
}

<div class=”collapse navbar-collapse overflow-y-menu” id=”navbarNavDropdown”>

[garyseven]

small update…
needs “nowrap”

/*Scroll mobile menu*/
@media (max-width: 767px) {
.overflow-y-menu {
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /* mobile safari */
height: calc(100vh – 85px);
white-space: nowrap;
}
}

[Author]

Posts