Topic: Progress bar beneath the Nav-bar

Abumaizer pro asked 6 years ago

How can I display a progress bar at the bottom of a nav bar?

this is my HTML markup,

<!-- Sidebar navigation -->
<mdb-sidenav #sidenavclass="unique-color" [fixed]="false">
<!-- Logo -->
<divclass="logo-wrapper waves-light">

<!-- Navbar -->

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

<ulclass="nav navbar-nav nav-flex-icons ml-auto">
<liclass="nav-item waves-light"mdbRippleRadiusrouterLinkActive="active waves-light">

<iclass="fa fa-home"></i>
<spanclass="clearfix d-none d-sm-inline-block">Home</span>
<!-- <li class="nav-item dropdown">
<a class="nav-link waves-effect waves-light"> <i class="fa fa-envelope"></i></a>
</li> -->

<liclass="nav-item dropdown btn-group"dropdown>
<adropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
<iclass="fa fa-envelope"></i>
<divclass="dropdown-menu card"role="menu">
<liclass="list-group-item">Cras justo odio</li>
<liclass="list-group-item">Dapibus ac facilisis in</li>
<liclass="list-group-item">Morbi leo risus</li>
<liclass="list-group-item">Porta ac consectetur ac</li>
<liclass="list-group-item">Vestibulum at eros</li>


<liclass="nav-item dropdown btn-group"dropdown>
<adropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
<iclass="fa fa-user"></i>
<divclass="dropdown-menu dropdown-primary dropdown-menu-right avatar"role="menu">
<divclass="avatar text-center"><a><imgsrc=""class="img-fluid rounded-circle z-depth-0"></a></div>

<h5>Hello {{userName}}</h5>
<aclass="dropdown-item nav-link"routerLink="/web/welcome">Home</a>
<aclass="dropdown-item" [routerLink]="['/']">Profile</a>
<aclass="dropdown-item" (click)="onSignout()">Sign Out</a>

<mdb-progress-barclass="progress primary-color-dark"mode="indeterminate"></mdb-progress-bar>
<!--/. Navbar -->

<!--/.Double navigation-->


Damian Gemza staff answered 6 years ago


For now, you can enter it just below your's </header> tag. If you put it in your's navbar's tags, it won't render, because that's how it works. Content in navbars in Angular are rendered only with <logo>, <links> and <navlinks> tags.

Best Regards,


Please insert min. 20 characters.


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



Specification of the issue

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