Fixed sidenav is not fixed using the example in the doc

Topic: Fixed sidenav is not fixed using the example in the doc

olaniyimoses pro asked 6 years ago

using the example code in angular documentation,

<mdb-side-nav #sidenav class="sn-bg-1 fixed" [fixed]="true">

sidenav is not fixed. Please, what am i not getting?

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

Please insert min. 20 characters.

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 6 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 6 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/

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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 6 years ago

Dear @Damian Gemza . Thank you for helping me. Here is my code. the fixed sidenav is not fixed for me. Thank you.

<mdb-side-nav#sidenavclass="sn-bg-1 fixed"[fixed]="true">

<mdb-navbar-brand>

<li>

<divclass="logo-wrapper waves-light">

<ahref="#"><imgsrc="../../../assets/logo/inno_logo.png"class="img-fluid flex-center"></a>

</div>

</li>

</mdb-navbar-brand>

<links>

<li>

<ulclass="collapsible collapsible-accordion">

<mdb-accordion[multiple]="false"aria-multiselectable="false">

<mdb-accordion-item>

<mdb-accordion-item-headmdbWavesEffect><iclass="fa fa-chevron-right"></i> Collapsible menu</mdb-accordion-item-head>

<mdb-accordion-item-body>

<ul>

</ul>

</mdb-accordion-item-body>

</mdb-accordion-item>

<mdb-accordion-itemclass="no-collase">

<mdb-accordion-item-headmdbWavesEffect><iclass="fa fa-hand-pointer-o"></i> Simple link</mdb-accordion-item-head>

<mdb-accordion-item-body></mdb-accordion-item-body>

</mdb-accordion-item>

<mdb-accordion-item>

<mdb-accordion-item-headmdbWavesEffect><iclass="fa fa-eye"></i> Collapsible menu 2</mdb-accordion-item-head>

<mdb-accordion-item-body>

<ul>

</ul>

</mdb-accordion-item-body>

</mdb-accordion-item>

<mdb-accordion-itemclass="no-collase">

<mdb-accordion-item-headmdbWavesEffect><iclass="fa fa-diamond"></i> Simple link 2</mdb-accordion-item-head>

<mdb-accordion-item-body></mdb-accordion-item-body>

</mdb-accordion-item>

</mdb-accordion>

</ul>

</li>

</links>

<divclass="sidenav-bg mask-strong"></div>

</mdb-side-nav>

<mdb-navbarSideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav"[containerInside]="false">

<navlinksclass="navbar-container">

<divclass="float-left">

<a(click)="sidenav.show()"class="button-collapse"><iclass="fa fa-bars"></i></a>

</div>

</navlinks>

<ulclass="nav navbar-nav nav-flex-icons ml-auto ie-double-nav">

<liclass="nav-item dropdown btn-group"dropdown>

<adropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbWavesEffect>

<iclass="fa fa-user"></i> Admin

</a>

<divclass="dropdown-menu dropdown-primary dropdown-menu-right"role="menu">

<aclass="dropdown-item"href="#">Edit Account</a>

<aclass="dropdown-item"href="#">App. Config.</a>

<aclass="dropdown-item"href="#">Logout</a>

</div>

</li>

</ul>

</navlinks>

</mdb-navbar>

<p>Dear <a href="/profile/?id=29824" rel="nofollow">@Damian Gemza</a> . Thank you for helping me. Here is my code. the fixed sidenav is not fixed for me. Thank you.</p><p> </p><div><br /><div></div><div><mdb-side-nav#sidenavclass="sn-bg-1 fixed"[fixed]="true"></div><br /><div><mdb-navbar-brand></div><div></div><div><li></div><div><divclass="logo-wrapper waves-light"></div><div><ahref="#"><imgsrc="../../../assets/logo/inno_logo.png"class="img-fluid flex-center"></a></div><div></div></div><div></li></div><div></div><div></mdb-navbar-brand></div><br /><div><links></div><div></div><div><li></div><div><ulclass="collapsible collapsible-accordion"></div><div><mdb-accordion[multiple]="false"aria-multiselectable="false"></div><br /><div></div><div><mdb-accordion-item></div><div><mdb-accordion-item-headmdbWavesEffect><iclass="fa fa-chevron-right"></i> Collapsible menu</mdb-accordion-item-head></div><div><mdb-accordion-item-body></div><div><ul></div><div><li><ahref="#"class="waves-effect"mdbWavesEffect>Link 1</a></li></div><div><li><ahref="#"class="waves-effect"mdbWavesEffect>Link 2</a></li></div><div></ul></div><div></mdb-accordion-item-body></div><div></mdb-accordion-item></div><br /><div></div><div><mdb-accordion-itemclass="no-collase"></div><div><mdb-accordion-item-headmdbWavesEffect><iclass="fa fa-hand-pointer-o"></i> Simple link</mdb-accordion-item-head></div><div><mdb-accordion-item-body></mdb-accordion-item-body></div><div></mdb-accordion-item></div><br /><div></div><div><mdb-accordion-item></div><div><mdb-accordion-item-headmdbWavesEffect><iclass="fa fa-eye"></i> Collapsible menu 2</mdb-accordion-item-head></div><div><mdb-accordion-item-body></div><div><ul></div><div><li><ahref="#"class="waves-effect"mdbWavesEffect>Link 1</a></li></div><div><li><ahref="#"class="waves-effect"mdbWavesEffect>Link 2</a></li></div><div></ul></div><div></mdb-accordion-item-body></div><div></mdb-accordion-item></div><br /><div></div><div><mdb-accordion-itemclass="no-collase"></div><div><mdb-accordion-item-headmdbWavesEffect><iclass="fa fa-diamond"></i> Simple link 2</mdb-accordion-item-head></div><div><mdb-accordion-item-body></mdb-accordion-item-body></div><div></mdb-accordion-item></div><br /><div></mdb-accordion></div><div></ul></div><div></li></div><div></div><div></links></div><div><divclass="sidenav-bg mask-strong"></div></div><div></mdb-side-nav></div><div></div><br /><div></div><div><mdb-navbarSideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav"[containerInside]="false"></div><br /><div><navlinksclass="navbar-container"></div><div></div><div><divclass="float-left"></div><div><a(click)="sidenav.show()"class="button-collapse"><iclass="fa fa-bars"></i></a></div><div></div></div><div></div><div></navlinks></div><br /><div><navlinks></div><div><ulclass="nav navbar-nav nav-flex-icons ml-auto ie-double-nav"></div><div><liclass="nav-item dropdown btn-group"dropdown></div><div><adropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbWavesEffect></div><div><iclass="fa fa-user"></i> Admin</div><div></a></div><div><divclass="dropdown-menu dropdown-primary dropdown-menu-right"role="menu"></div><div><aclass="dropdown-item"href="#">Edit Account</a></div><div><aclass="dropdown-item"href="#">App. Config.</a></div><div><aclass="dropdown-item"href="#">Logout</a></div><div></div></div><div></li></div><div></ul></div><div></navlinks></div><div></mdb-navbar></div><div></div></div>

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

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

olaniyimoses

Pro User 35Support score
7Questions 0Answers 1Snippets