Topic: Resposive double nav
I have a few questions about the side nav, first of all, I,m using this library with the assumption it reduces the need for me to manually right styles/functions.
Starting with the simplest:
How do I change the side nav color? and to be specific I need a light colour.
- The vertical scroll bar of the side-nav will be visible whenever the browser window isn't the full width!
I want the side nav to be hidden on smaller screens, I found that you provide
sidenavBreakpointhowever when navigating with
angular routerLinkit doesn't close itself and if I use
(click)="sidenav.hide();"then it will hide the nav on a big screen which shouldn't couldn't happen.
I can't find a way to change the side nav open style, it is always overlapping the main content, I need it to push and adjust at least in big screens
An example with these would be really useful for me and your documentations.
PS: Is it a good idea using MDB for SPA mobile app?
You can find the example here, just change
body class name from
Could you confirm if you use 6.3.0 version? There were some problems with sidenav scroll and mask in 6.x.x but we fixed that later.
Could you please point me to the example to get the same behaviour as the examples. Specifically this one https://mdbootstrap.com/live/_MDB/index/docs/skins/white-skin.html
Thanks for the light colour, I was hoping you have a better implementation I guess MDB isn't the best option for mobile SPA.
All the examples in https://mdbootstrap.com/docs/angular/navigation/sidenav have scroll bars.
The issue appears when adding
side-nav class which allow adding a margin to push down the side nav from the top navbar
I can't find the example I copied from, but it results in what looks like two side navs! at the bottom but surprisingly if the browser is full window width it doesn't appear!
Please take a look at the 'customization' section in our documentation:
For example, for light color you can use:
<mdb-side-nav class="blue lighten-2">
As for the problem with closing sidenav when navigating - you can try to add an if statement to check the browser screen width before using
Unfortunately we don't have 'push' version of sidenav, but I will add this feature to our nice-to-have list.
Could you provide more information/screenshot for the problem with vertical scroll? Do you currently use MDB Angular v6.3.0?
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.3.0
- Device: Windows
- Browser: FF & Chrome
- OS: Win10
- Provided sample code: No
- Provided link: No