Topic: Resposive double nav
Hi,
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 withangular 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?
Thanks
You can find the example here, just change body class name from light-blue-skin to white-skin:
https://mdbootstrap.com/docs/angular/navigation/compositions/#f-s-f-n
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.
et3rnal87 pro commented 4 years ago
Yes 6.3.0 I tried updating to v8 when I upgraded my angular to 8 but so many things broke down, all button colours changed!
Arkadiusz Idzikowski staff commented 4 years ago
There was a lot of breaking changes both in our library and Angular framework itself. If you want to use v8, the best way to do that would be to update your versions to 7.x.x first and then migrate to version 8.
You can find some useful information about migrations in our migration guide and on Angular Update page.
MDB Angular migration guide: https://mdbootstrap.com/docs/angular/getting-started/migration/
Angular update guide: https://update.angular.io
et3rnal87 pro commented 4 years ago
I'm already on angular 8 now, going to MDB 7 doesn't seem to work. ill check the migration link you provided
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
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:
https://mdbootstrap.com/docs/angular/navigation/sidenav/#color
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 hide() method.
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.3.0
- Device: Windows
- Browser: FF & Chrome
- OS: Win10
- Provided sample code: Yes
- Provided link: No