Double Navigation with fixed SideNav & fixed Navbar

Dear Liz Cross,

The side nav is fixed in this example, but only in a resolution greater than 1450px.

If you're using some smaller screen, it will be hidden from default, even if it is a fixed example.

To change the sidenav breakpoint, please use the [sidenavBreakpoint] input which is available on <mdb-side-nav> element.

Here you can read more about it. Just open the API tab.

Best Regards,

Damian

Hi Damian, Yes I know about the browser width auto-hide break point, the problem is that the live preview works ( well sort of, as the side-nav is in a scroll box for some reason, see the attached image ) but the code example does not work at any screen width.

Regards, Liz

Could you paste here the code you used for rendering our sidenav component?

Hi, Here is the code I use it's basically the code from your navigation/compositions page

https://mdbootstrap.com/docs/angular/navigation/compositions/#f-s-f-n

Sorry the code losses formatting using your text editor.

< !--Double navigation--> < header> < !-- Sidebar navigation --> < mdb-side-nav #sidenav class="sn-bg-1 fixed" [fixed]="true"> < mdb-navbar-brand> < !-- Logo --> < li> < div class="logo-wrapper waves-light"> < a [routerLink]="['/main', { outlets: { page: ['dashboard'] } }]">< img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center">< /a> < /div> < /li> < !--/. Logo --> < /mdb-navbar-brand> < links> < !-- Side navigation links --> < li> < ul class="collapsible collapsible-accordion"> < mdb-accordion [multiple]="false" aria-multiselectable="false"> < !-- Cultivation --> < mdb-accordion-item> < mdb-accordion-item-head mdbWavesEffect>< i class="fas fa-leaf">< /i> Cultivation< /mdb-accordion-item-head> < mdb-accordion-item-body> < ul> < li>< a [routerLink]="['/main', { outlets: { page: ['seeds'] } }]" routerLinkActive="active">< i class="fas fa-seedling">< /i>Seeds< /a>< /li> < li>< a [routerLink]="['/main', { outlets: { page: ['plants'] } }]" routerLinkActive="active">< i class="fas fa-tree">< /i>Plants< /a>< /li> < li>< a [routerLink]="['/main', { outlets: { page: ['rooms'] } }]" routerLinkActive="active">< i class="fas fa-boxes">< /i>Rooms< /a>< /li> < /ul> < /mdb-accordion-item-body> < /mdb-accordion-item> < !-- Suppliers --> < mdb-accordion-item class="no-collase"> < mdb-accordion-item-head [routerLink]="['/main', { outlets: { page: ['suppliers'] } }]" routerLinkActive="active" mdbWavesEffect>< i class="fas fa-globe">< /i> Suppliers< /mdb-accordion-item-head> < mdb-accordion-item-body>< /mdb-accordion-item-body> < /mdb-accordion-item> < !-- Deliveries In --> < mdb-accordion-item class="no-collase"> < mdb-accordion-item-head [routerLink]="['/main', { outlets: { page: ['deliveries'] } }]" routerLinkActive="active" mdbWavesEffect>< i class="fas fa-truck">< /i> Deliveries< /mdb-accordion-item-head> < mdb-accordion-item-body>< /mdb-accordion-item-body> < /mdb-accordion-item> < !-- Administration --> < mdb-accordion-item class="no-collase"> < mdb-accordion-item-head [routerLink]="['/main', { outlets: { page: ['deliveries'] } }]" routerLinkActive="active" mdbWavesEffect>< i class="fas fa-users">< /i> Administration< /mdb-accordion-item-head> < mdb-accordion-item-body>< /mdb-accordion-item-body> < /mdb-accordion-item> < /mdb-accordion> < /ul> < /li> < !--/. Side navigation links --> < /links> < div class="sidenav-bg mask-strong">< /div> < /mdb-side-nav> < !--/. Sidebar navigation --> < !-- Navbar --> < mdb-navbar SideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav" [containerInside]="false"> < navlinks class="navbar-container"> < !-- SideNav slide-out button --> < div class="float-left"> < a (click)="sidenav.show()" class="button-collapse">< i class="fas fa-bars">< /i>< /a> < /div> < !--/. SideNav slide-out button --> < /navlinks> < mdb-navbar-brand> < !-- Breadcrumb--> < p>Hi {{ name }}< /p> < /mdb-navbar-brand> < navlinks> < ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav"> < li class="nav-item"> < a class="nav-link waves-light" mdbWavesEffect>< i class="fas fa-envelope">< /i> < span class="clearfix d-none d-sm-inline-block">Contact< /span>< /a> < /li> < li class="nav-item"> < a class="nav-link waves-light" mdbWavesEffect>< i class="far fa-comments">< /i> < span class="clearfix d-none d-sm-inline-block">Support< /span>< /a> < /li> < li class="nav-item"> < a class="nav-link waves-light" mdbWavesEffect>< i class="fas fa-user">< /i> < span class="clearfix d-none d-sm-inline-block">Account< /span>< /a> < /li> < li class="nav-item dropdown btn-group" dropdown> < a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect> Dropdown < /a> < div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu"> < a class="dropdown-item" href="#">Action< /a> < a class="dropdown-item" href="#">Another action< /a> < a class="dropdown-item" href="#">Something else here< /a> < /div> < /li> < /ul> < /navlinks> < /mdb-navbar> < !--/. Navbar --> < /header> < !--/.Double navigation--> < !--Main Layout--> < main> < div class="container-fluid mt-5"> < div class="row"> < div class="col"> < router-outlet name="page">< /router-outlet> < /div> < /div> < /div> < /main> < !--/Main layout-->

Dear Liz Cross,

Please paste your code in the code style (using " ` " sings), because the above code is unreproducible.

Best Regards, Damian

Hi Damian,I have tried pasting the source code into the editor using the ` ( back tick ) as you suggested but some of the code gets removed by the editor, please try yourself with the source code file I have linked here, anyway this is a link to my source code for the navigation. It's from the source code supplied on the https://mdbootstrap.com/docs/angular/navigation/compositions/#f-s-f-n page the Fx. SideNav & fx Nav navigation type

Source code here

Dear Liz,

I have copied your code into my application, and everything is fine. On the 24" monitor the side nav is fixed. On the laptop 13" FullHD screen the side nav is also fixed.

I don't see there any problem.

Best Regards, Damian