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?

Damian Gemza staff answered 6 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 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/


Damian Gemza staff answered 6 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 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.

 


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

<mdb-navbar-brand>
<!-- Logo -->
<li>
<divclass="logo-wrapper waves-light">
<ahref="#"><imgsrc="../../../assets/logo/inno_logo.png"class="img-fluid flex-center"></a>
</div>
</li>
<!--/. Logo -->
</mdb-navbar-brand>

<links>
<!-- Side navigation links -->
<li>
<ulclass="collapsible collapsible-accordion">
<mdb-accordion[multiple]="false"aria-multiselectable="false">

<!-- Collapsible link -->
<mdb-accordion-item>
<mdb-accordion-item-headmdbWavesEffect><iclass="fa fa-chevron-right"></i> Collapsible menu</mdb-accordion-item-head>
<mdb-accordion-item-body>
<ul>
<li><ahref="#"class="waves-effect"mdbWavesEffect>Link 1</a></li>
<li><ahref="#"class="waves-effect"mdbWavesEffect>Link 2</a></li>
</ul>
</mdb-accordion-item-body>
</mdb-accordion-item>

<!-- Simple link -->
<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>

<!-- Collapsible link -->
<mdb-accordion-item>
<mdb-accordion-item-headmdbWavesEffect><iclass="fa fa-eye"></i> Collapsible menu 2</mdb-accordion-item-head>
<mdb-accordion-item-body>
<ul>
<li><ahref="#"class="waves-effect"mdbWavesEffect>Link 1</a></li>
<li><ahref="#"class="waves-effect"mdbWavesEffect>Link 2</a></li>
</ul>
</mdb-accordion-item-body>
</mdb-accordion-item>

<!-- Simple link -->
<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>
<!--/. Side navigation links -->
</links>
<divclass="sidenav-bg mask-strong"></div>
</mdb-side-nav>
<!--/. Sidebar navigation -->

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

<navlinksclass="navbar-container">
<!-- SideNav slide-out button -->
<divclass="float-left">
<a(click)="sidenav.show()"class="button-collapse"><iclass="fa fa-bars"></i></a>
</div>
<!--/. SideNav slide-out button -->
</navlinks>

<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>
<!--/. Navbar -->

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: 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