Hello guys and girls
Many of us been in the situation when we have a fixed navigation with too many nav-links in the menu, so they are not all visible on mobile device screens. And at this point, we want to have our menu be scrollable. So how to do this?
Solution will depend on the Menu opening type, that you choose in the Navigation settings
NOTE: All these tips make sense only for fixed navigation!
1. DROP DOWN menu
This Solution is easiest. All you have to do is give the nav-menu a fixed height and set it overflow: auto
2. Over Right & Over Left (menu slides out from the right or left side)
In this type of the menu we will have to use some tricky step and DO NOT CHANGE overflow and height settings of the nav-menu.
- Add a div inside the nav-menu and give it a class (I call it “scroll-wrap”)
- Give this div some fixed height and set overflow: auto
- Add link-blocks+text or just text-links into the scroll-wrap div and style them as a nav-links (because standard nav-links have pre-defined settings, which do not let to move them anywhere.)
Good luck with your projects