Mobile optimization: Make notification menu with position:absolute scrollable

Question

I recently bought Moltran which is fine but has a big disadvantage: The notification menu disappears on mobile devices, which is not suiteable for me. So I learned that that this can be done removing the hidden-xs class of the li notification element. This will turn <li class="dropdown hidden-xs open"> to <li class="dropdown open">, which works fine.

Now I stretched the small menu on the full width of the screen If the user has a smaller device for better usability:

@media (max-width: 767px) {
    .nav > li.dropdown:not(.hidden-xs).open .dropdown-menu {
        width: 100vw;
    }
}

Everything works fine, until one thing: I'm not able to scroll in the menu. Using a modern 5" smartphone horizontal, 3 elements at the end are hidden. Instead the scrolling will affect the background caused by the absolute position.

A simple demonstration on the online demo to make it more clear: I only removed the class hidden-xs because otherwise the menu would not appear on small windows in the line <li class="dropdown hidden-xs open"> as I said before.

When the window is very small, its not able to see the full notification menu and the user isn't able to scroll there:

As you can see, the scroll bar on the right is at the bottom, but you can't full see the notifications because the scroll bar doesn't affect this menu. I tried a few things, mainly switching to other position types because the absolute position seems to cause the issue. But nothing worked, seems like I'm in a blind end.

So my question is: What changes are necessary to keep the functionality as it is, but provide a way to scroll in the notifications on smaller devices?

Answer 1

Well. If I understand correctly you should set overflow to your navigation bar. And it should do the trick.

.topbar{
    height: 100%;
    background: transparent;
    overflow-y: auto;
}

EDIT: This will set height of your topbar to 100%. Because of this it will overlap all elements on the screen.

As an alternative you can add a separate class when notification button is clicked and style this element only in such case. For example:

.topbar.notification-open{
    height: 100%;
    background: transparent;
    overflow-y: auto;
}

And toggle class with jQuery:

$('.dropdown-toggle').click(function(){
    $(this).closest('.topbar').toggleClass('notification-open');
});

Answer 2

You can make the notification panel scrollable:

.navbar-nav .open .dropdown-menu {
  background-color: #ffffff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  left: auto;
  position: absolute;
  right: 0;
  z-index: 100;

  // Extra code required

  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* lets it scroll lazy */
  max-height: 500px; //or whatever. Could be 90vh
}

This should work just fine. Hope it helps.