Q:

Mobile optimization: Make notification menu with position:absolute scrollable

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?

A:

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');
});

