sidenav & navbar not working

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: sidenav & navbar not working

Weiser pro asked 7 years ago

Hi, i've copied your code example for "Double Navigation with hidden SideNav & fixed Navbar" (also CSS) but it's not working correctly. I'm using Angular 5, with cli 1.5.0 and MDB 5.1.0. also tried with newest cli.   navbar is not clickable, no buttons etc. Here the link to expected behavior: https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/side-nav-hidden-navbar-fixed.html Link to my HTML: https://gist.github.com/anonymous/d4af751a1c0b526d6ed8523075d9d12b#file-doublenavbar-html here's a screenshot of my result: https://imgur.com/aeQ0TvP

Damian Gemza staff answered 7 years ago

Hi Weiser, This line you have to add to your's index.html, not your's component.html. 
<body class="mdb-skin bg-skin-lp">
And css styles you have to add to your's global .scss stylesheet. Please try this advices. If it won't work, we'll think about other things. Best Regards, Damian  

Weiser pro answered 7 years ago

i have now deleted the body tag from my component and added it to index.html. also the CSS snippet. The result is the same as before.

Weiser pro answered 7 years ago

well, i found something that may break the navbar.

by wrapping a link tag to links, it is now displaying content (sidenav also working).

but if you make the screen smaller all buttons disappear.

This seems like a bug by MDB. i would appreciate a proper solution asap.

 

HTML:

<!--Double navigation-->
<header>

<!-- Sidebar navigation -->

<mdb-sidenav #sidenavclass="sn-bg-1" [fixed]="false">

<!-- Logo -->

<li>

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

<ahref="#">

<imgsrc="http://mdbootstrap.com/img/logo/mdb-transparent.png"class="img-fluid flex-center">

</a>

</div>

</li>

<!--/. Logo -->

<!--Social-->

<li>

<ulclass="social">

<li>

<aclass="icons-sm fb-ic">

<iclass="fa fa-facebook"></i>

</a>

</li>

<li>

<aclass="icons-sm pin-ic">

<iclass="fa fa-pinterest"></i>

</a>

</li>

<li>

<aclass="icons-sm gplus-ic">

<iclass="fa fa-google-plus"></i>

</a>

</li>

<li>

<aclass="icons-sm tw-ic">

<iclass="fa fa-twitter"></i>

</a>

</li>

</ul>

</li>

<!--/Social-->

<!--Search Form-->

<li>

<formclass="search-form"role="search">

<divclass="form-group waves-light"mdbRippleRadius>

<inputtype="text"class="form-control"placeholder="Search">

</div>

</form>

</li>

<!--/.Search Form-->

<!-- Side navigation links -->

<li>

<ulclass="collapsible collapsible-accordion">

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

<!-- Collapsible link -->

<mdb-item>

<mdb-item-headmdbRippleRadius>

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

<mdb-item-body>

<ul>

<li>

<ahref="#"class="waves-effect"mdbRippleRadius>Link 1</a>

</li>

<li>

<ahref="#"class="waves-effect"mdbRippleRadius>Link 2</a>

</li>

</ul>

</mdb-item-body>

</mdb-item>

<!-- Simple link -->

<mdb-itemclass="no-collase">

<mdb-item-headmdbRippleRadius>

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

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

</mdb-item>

<!-- Collapsible link -->

<mdb-item>

<mdb-item-headmdbRippleRadius>

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

<mdb-item-body>

<ul>

<li>

<ahref="#"class="waves-effect"mdbRippleRadius>Link 1</a>

</li>

<li>

<ahref="#"class="waves-effect"mdbRippleRadius>Link 2</a>

</li>

</ul>

</mdb-item-body>

</mdb-item>

<!-- Simple link -->

<mdb-itemclass="no-collase">

<mdb-item-headmdbRippleRadius>

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

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

</mdb-item>

</mdb-squeezebox>

</ul>

</li>

<!--/. Side navigation links -->

</mdb-sidenav>

<!--/. Sidebar navigation -->

<!-- Navbar -->

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

<!-- SideNav slide-out button -->

<links>

<divclass="float-xs-left">

<a (click)="sidenav.show()"class="button-collapse">

<iclass="fa fa-bars"></i>

</a>

</div>

<!--/. SideNav slide-out button -->

<!-- Breadcrumb-->

<divclass="breadcrumb-dn mr-auto">

<p>Material Design for Bootstrap</p>

</div>

<!--/. Breadcrumb-->

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

<liclass="nav-item">

<aclass="nav-link waves-light"mdbRippleRadius>

<iclass="fa fa-envelope"></i>

<spanclass="clearfix d-none d-sm-inline-block">Contact</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-light"mdbRippleRadius>

<iclass="fa fa-comments-o"></i>

<spanclass="clearfix d-none d-sm-inline-block">Support</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-light"mdbRippleRadius>

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

<spanclass="clearfix d-none d-sm-inline-block">Account</span>

</a>

</li>

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

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

Dropdown

</a>

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

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

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

<aclass="dropdown-item"href="#">Something else here</a>

</div>

</li>

</ul>

</links>

</mdb-navbar>

<!--/. Navbar -->

</header>

<!--/.Double navigation-->

<!--Main Layout-->

<main>

<divclass="container-fluid">
<h2>Advanced Double Navigation with hidden SideNav & fixed Navbar:</h2>

<br>

<h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.</h5>

<h5>2. Fixed navbar. It will always stay visible on the top, even when you scroll down.</h5>

<divstyle="height: 2000px"></div>

</div>

</main>
<!--/Main layout-->

Damian Gemza staff commented 7 years ago

Hello, Now i'm working to fix that bug. Please stay patient. I'll inform you, when problem will be solved.

Damian Gemza staff answered 7 years ago

Dear Weiser, Please do the followings to repair your's navigation. Today we've put this fix  to our GIT to dev branch.
  1. Please use code below for your's app.component.html 
    <!--Double navigation-->

<header>

<!-- Sidebar navigation -->

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

<logo>

<!-- Logo -->

<li>

<div class="logo-wrapper waves-light">

<a href="#">

<img src="http://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center">

</a>

</div>

</li>

<!--/. Logo -->

</logo>

<links>

<!--Social-->

<li>

<ul class="social">

<li>

<a class="icons-sm fb-ic">

<i class="fa fa-facebook"></i>

</a>

</li>

<li>

<a class="icons-sm pin-ic">

<i class="fa fa-pinterest"></i>

</a>

</li>

<li>

<a class="icons-sm gplus-ic">

<i class="fa fa-google-plus"></i>

</a>

</li>

<li>

<a class="icons-sm tw-ic">

<i class="fa fa-twitter"></i>

</a>

</li>

</ul>

</li>

<!--/Social-->

<!--Search Form-->

<li>

<form class="search-form" role="search">

<div class="form-group waves-light" mdbRippleRadius>

<input type="text" class="form-control" placeholder="Search">

</div>

</form>

</li>

<!--/.Search Form-->

<!-- Side navigation links -->

<li>

<ul class="collapsible collapsible-accordion">

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

<!-- Collapsible link -->

<mdb-item>

<mdb-item-headmdbRippleRadius>

<i class="fa fa-chevron-right"></i> Collapsible menu</mdb-item-head>

<mdb-item-body>

<ul>

<li>

<a href="#" class="waves-effect" mdbRippleRadius>Link 1</a>

</li>

<li>

<a href="#" class="waves-effect" mdbRippleRadius>Link 2</a>

</li>

</ul>

</mdb-item-body>

</mdb-item>

<!-- Simple link -->

<mdb-item class="no-collase">

<mdb-item-head mdbRippleRadius>

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

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

</mdb-item>

<!-- Collapsible link -->

<mdb-item>

<mdb-item-head mdbRippleRadius>

<i class="fa fa-eye"></i> Collapsible menu 2</mdb-item-head>

<mdb-item-body>

<ul>

<li>

<a href="#" class="waves-effect" mdbRippleRadius>Link 1</a>

</li>

<li>

<a href="#" class="waves-effect" mdbRippleRadius>Link 2</a>

</li>

</ul>

</mdb-item-body>

</mdb-item>

<!-- Simple link -->

<mdb-item class="no-collase">

<mdb-item-head mdbRippleRadius>

<i class="fa fa-diamond"></i> Simple link 2</mdb-item-head>

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

</mdb-item>

</mdb-squeezebox>

</ul>

</li>

<!--/. Side navigation links -->

</links>

</mdb-sidenav>

<!--/. Sidebar navigation -->

<mdb-navbar SideClass="navbar navbar-expand-md scrolling-navbar double-nav" [containerInside]="false">

<links>

<!-- SideNav slide-out button -->

<div class="float-xs-left">

<a (click)="sidenav.show()" class="button-collapse">

<i class="fa fa-bars"></i>

</a>

</div>

<!--/. SideNav slide-out button -->

</links>

<links>

<ul class="nav navbar-nav nav-flex-icons ml-auto ">

<li class="nav-item">

<a class="nav-link waves-light" mdbRippleRadius>

<i class="fa 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" mdbRippleRadius>

<i class="fa fa-comments-o"></i>

<span class="clearfix d-none d-sm-inline-block">Support</span>

</a>

</li>

<li class="nav-item">

<a class="nav-link waves-light" mdbRippleRadius>

<i class="fa 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" mdbRippleRadius>

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>

</links>

</mdb-navbar>

<!--/. Navbar -->

</header>


2. Open file /free/navbars/navbar.component.html and use code below:


    <nav class="{{SideClass}}" #nav>

 

<div [ngClass]="{'container': containerInside}" [ngStyle]="{'display': displayStyle}" #container>

<ng-content select="logo"></ng-content>

<ng-content select="logo"></ng-content>

<ng-content select="links"></ng-content>

<div #navbar [style.height]="height" class="navbar-collapse collapse"

[ngClass]="{'collapse': collapse, 'show': showClass, 'collapsing': collapsing}">

<ng-content select="links"></ng-content>

</div>

</div>

</nav>
     
Now it should works fine. If not, please let me know. Best Regards, Damian

TURKI Hosni pro commented 7 years ago

Hello Damian, I wanted to post the same problem, I will test your solution and make you a return (can you in addition to the correction update the documentation). Thank you

Damian Gemza staff commented 7 years ago

Turki, feel free to try my solution :) I will be happy, if this solution helps you too.

Weiser pro commented 7 years ago

Hi Damian, so far it's working correctly. thank you.

Damian Gemza staff commented 7 years ago

No problem. Glad that could help you. Best Regards, Damian

TURKI Hosni pro commented 7 years ago

It seems to work for me too, you just have to adapt the part of the css. Thank you.

Damian Gemza staff commented 7 years ago

Which css are needed to adapt ? What are you thinking about? Some screenshoots?

TURKI Hosni pro commented 7 years ago

It's more of my side that I have to adapt because I put the navbar transaprente when it is ".navbar: not (.top-nav-collapse)", things like that. Disregarding this, your solution works well

Weiser pro answered 7 years ago

I've just noticed that one link tag takes full width, two 50% width ...etc. is there an option for links taking only the width needed? like col-auto with columns. here's a screenshot: https://imgur.com/FBMbEMB i want my searchbar taking dynamic full width between the icon left und the links right. Second Question: is there a way using a navbar with two rows? using rows and columns inside navbar wont work.

Damian Gemza staff commented 7 years ago

That solution which i've provided for you guys isn't complete at all. I'm still working on better rendering navbar. You can now try to add some styles inline for this element by self or give me more time, and I will provide you better solution :) Best Regards, Damian

Weiser pro commented 7 years ago

Ok, but is something like a two row navbar a thing for next release? :)

Damian Gemza staff commented 7 years ago

Dear Weiser, i'm sorry, but two row navbar isn't in our developer plans. If you want this, you have to customize our styles by self to achieve desired situation. Best Regards, Damian

Hosboss pro answered 7 years ago

Hi Damian, Double navigation is not compatible with Edge and Firefox. The links on the right are lined up and left. And on Internet Explorer the pool of the sidenav always appears (it does not withdraw). 
Do you have a solution for these two problems? Thank you.

Damian Gemza staff commented 7 years ago

Hello Turki, I see, there's problem on Edge. I'll try to fix this problem in next release. But for Firefox - i don't see any problems. Which firefox and os do you have ? I've tested this with Firefox Quantum 57.0.4 (64-bit) on Ubuntu.

TURKI Hosni pro commented 7 years ago

There is no problem on Firefox actually, it's an error on my part it's on Edge and Internet Explorer. Have you noticed the second problem on Internet Explorer (mask that remains to display). Thank you ?

TURKI Hosni pro commented 7 years ago

There is no problem on Firefox actually, it's an error on my part it's on Edge and Internet Explorer. Have you noticed the second problem on Internet Explorer (mask that remains to display). Thank you ?

Damian Gemza staff commented 7 years ago

Hello Turki, i've fixed problems with screwed up double nav in IE (10/11) and Edge. My fix will be available in next release of MDB (Probably this or next week). Best Regards, Damian
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: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
About author
Weiser
Pro User
15Support score
10Questions 5Answers
0Snippets likes 0Snippets