Optimization of mobile devices: Make a notification menu with the position: absolute scrollable

Question

I recently bought Moltran , which is good, but it has a big drawback: the notification menu disappears on mobile devices, which is not suitable for me. Therefore, I found out that this can be done by removing the hidden-xs class of the li notification element. This will turn <li class="dropdown hidden-xs open"> into <li class="dropdown open"> , which works great.

Now I have stretched a small menu at full screen width. 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 happens: I cannot scroll through the menu. Using a modern 5-inch smartphone, 3 elements are hidden at the end, and scrolling affects the background caused by the absolute position.

A simple demo on an online demo to make it more understandable: I only deleted the hidden-xs class, because otherwise the menu will not appear on small windows in the line <li class="dropdown hidden-xs open"> , as I said.

When the window is very small, it is impossible to see the full notification menu, and the user cannot scroll it:

As you can see, the scroll bar on the right is at the bottom, but you cannot see it completely because the scroll bar does not affect this menu. I tried several things, mainly switching to other types of positions, because the absolute position seems to be causing the problem. But nothing worked, it seems I'm blind.

So my question is: what changes are necessary to maintain the functionality, what is it, but provide the ability to scroll through notifications on smaller devices?

Answer 1

Well. If I understand correctly, you should set the overflow in your navigation bar. And he has to do the trick.

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

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

Alternatively, you can add a separate class when you click the notification button and stylize this element only in this case. For example:

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

And switch the class using jQuery:

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

Answer 2

You can make the notification bar 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 fine. Hope this helps.

Answer 3

Just specify the fixed height of the ur notification area with the media request on a small device and set overflow-y: auto. Height should only be in px. For example, let notification_area be your div class.

 @media (max-width:600px){ .notification_area{ overflow-y:auto; height:300px; } }