Topic: Fixed sidenav is not fixed using the example in the doc
olaniyimoses pro asked 5 years ago
using the example code in angular documentation,
Damian Gemza staff answered 5 years ago
Dear @olaniyimoses
Unfortunately, this sidenav is fixed. I have copied your code, tested it on my 24" screen, and the sidenav is fixed.
On which resolution you're checking it? For tests, please add [sidenavBreakpoint]="1000" input to mdb-side-nav element, and check, if sidenav is fixed (visible) for you.
I assume, that you're testing this sidenav on the smaller screen than 1450px width, and because of that, sidenav is hidden.
Best Regards,
Damian
olaniyimoses pro commented 5 years ago
Thank you. It works now. it has to do with the breakpoint.
Please, if i want to change color of the sidenav and remove the image background. How do i do that?
Arkadiusz Idzikowski staff commented 5 years ago
You need to remove 'sn-bg-1' class from mdb-side-nav and add new one responsible for color, for example: <mdb-side-nav class="purple fixed" [fixed]="true">
You can find more information about colors here:
https://mdbootstrap.com/docs/angular/css/colors/
Damian Gemza staff answered 5 years ago
Dear @olaniyimoses
Could you please provide me with the code which is not working for you?
I have used the Fixed Sidenav & Fixed navbar example from our Navigation Layout documentation, and for me, the side nav is fixed. But please notice, that this side nav is fixed on bigger screens.
If you need to change the breakpoint of the side nav, please use the sidenavBreakpoint input.
You can read about this input in the API section of Sidenav / Layout compositions.
Best Regards,
Damian
olaniyimoses pro commented 5 years ago
Dear @Damian Gemza . Thank you for helping me. Here is my code. the fixed sidenav is not fixed for me. Thank you.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.0.0
- Device: Laptop
- Browser: Google Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No