Fixed sidenav is not fixed using the example in the doc

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
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 -->
Write
Create snippet
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
Tags
sidenav fixed-sidenav
Related topics
0
How to Fix Sidenav on medium sized devices
6
error
3
Sidenav - using multiple layers of Collapse?
2
fixed sidebar not working when font 150%
2
Fontawsome style missing from some CSS
About author
olaniyimoses
Pro User
35Support score
7Questions 0Answers
0Snippets likes 1Snippets