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,
<header>
<!-- Sidebar navigation -->
<mdb-sidenav #sidenavclass="unique-color" [fixed]="false">
<!-- Logo -->
<li>
<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">
<aclass="nav-link"routerLink="/web/welcome">
<iclass="fa fa-home"></i>
<spanclass="clearfix d-none d-sm-inline-block">Home</span>
</a>
</li>
<!-- <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>
Email
</a>
<divclass="dropdown-menu card"role="menu">
<div>
<ulclass="list-group">
<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>
</ul>
</div>
</div>
</li>
<liclass="nav-item dropdown btn-group"dropdown>
<adropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
<iclass="fa fa-user"></i>
Account
</a>
<divclass="dropdown-menu dropdown-primary dropdown-menu-right avatar"role="menu">
<divclass="avatar text-center"><a><imgsrc="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg"class="img-fluid rounded-circle z-depth-0"></a></div>
<hr>
<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>
</div>
</li>
</ul>
<mdb-progress-barclass="progress primary-color-dark"mode="indeterminate"></mdb-progress-bar>
</mdb-navbar>
<!--/. Navbar -->
</header>
<!--/.Double navigation-->
Damian Gemza staff answered 6 years ago
Hello,
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,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No