Navbar stopped working

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?

Add comment

jimsgroup pro answered 7 years ago

0 0 Best answer

<p>There are no console errors. When I inspect the source, it looks like this:</p>
<pre><mdb-navbar _ngcontent-c0="" sideclass="navbar fixed-top"><nav class="navbar fixed-top">
  <div class="container">
   
  </div>
 </nav>
</mdb-navbar></pre>
<p> </p>
<p>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?</p>
<pre><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>

Please insert min. 20 characters.

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

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

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

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

jimsgroup

Pro User 37Support score
21Questions 3Answers 0Snippets