Navbar stopped working

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Navbar stopped working

jimsgroup pro asked 7 years ago

My navbar had been working fine. I've just noticed, since the latest upgrade to mdb pro, it's stopped displaying.

My HTML is:

<mdb-navbar SideClass="navbar fixed-top">
<div class="navbar-col1">
<button type="button" class="btn btn-flat btn-round btn-lg" mdbRippleRadius (click)="goBack()"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
</div>

<div class="navbar-col2">
<h5 class="text-center">{{getHeading()}}</h5>
</div>

<div class="logo nav-item active waves-light navbar-col3" mdbRippleRadius>
<a routerLink="/" class="pull-right" id="logo">
<img src="../images/logo.png" class="header-img" />
</a>
</div>
</mdb-navbar>

This no longer renders. I did a simple test with the following, which renders my heading.

<mdb-navbar SideClass="navbar fixed-top">
 <logo><h5>{{getHeading()}}</h5></logo>
</mdb-navbar>

Why doesn't my original code work anymore?

Damian Gemza staff answered 7 years ago

Hello, Dear jimsgroup, could you provide me more informations? What doesn't works for you? Could you check your's browser console (F12) ? Maybe there's some errors. Please change line <a routerLink="/"> to: <a [routerLink]="['']"> We need more informations about your's problem. Best Regards, Damian

jimsgroup pro answered 7 years ago

There are no console errors. When I inspect the source, it looks like this:

<mdb-navbar _ngcontent-c0="" sideclass="navbar fixed-top"><nav class="navbar fixed-top">
  <div class="container">
   <!---->
  </div>
 </nav>
</mdb-navbar>

 

I changed the above code (In my question at the top of the page) to the following (changing the div tags to logo tags, and the navbar is then rendered. It seems as though mdb-navbar will only render logo and link tags?

<mdb-navbar SideClass="navbar fixed-top">
 <logo class="navbar-col1">
  <button type="button" class="btn btn-flat btn-round btn-lg" mdbRippleRadius (click)="goBack()"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
 </logo>

 <logo class="navbar-col2">
  <h5 class="text-center">{{getHeading()}}</h5>
 </logo>

 <logo class="logo nav-item active waves-light navbar-col3" mdbRippleRadius>
  <a [routerLink]="['']" class="pull-right" id="logo">
   <img src="../images/logo.png" class="header-img" />
  </a>
 </logo>
</mdb-navbar>

Damian Gemza staff commented 7 years ago

Dear jimsgroup, our navbar won't render if there won't be a logo or links tags. Please notice, that if you use our components, you have to build them in stricte our way - copy everything from our documentation, and change only links, colors and other configurable things :) Best Regards, Damian

FREE CONSULTATION

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

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
jimsgroup
Pro User
37Support score
21Questions 3Answers
0Snippets likes 0Snippets