Angular directive mdbStickyHeader is not working


Topic: Angular directive mdbStickyHeader is not working

varghesep premium asked 5 years ago

Expected behavior

When I have <mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark cyan lighten-3" [containerInside]="false">, the sticky top bar is working.

Actual behavior

When I have <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark cyan lighten-3" [containerInside]="false" mdbStickyHeader>, the top bar is not sticky.

Resources (screenshots, code snippets etc.)

The mdbStickyHeader is not adding the fixed-top style to the navigation is the issue. I have followed the instructions to include MDBBootstrapModulesPro.forRoot() in the app module, so it is not the module causing the issue.


Bartosz Termena staff answered 5 years ago

Dear @varghesep

https://mdbootstrap.com/docs/angular/navigation/sticky-header/

Sticky Header was created to allow you to use the functionality that is implemented in Google Chrome on mobile. If you move the page down, navbar will hide, and if you move up, navbar will show up. Sticky Header should not be fixed-top all the time.

Best Regards, Bartosz.


varghesep premium commented 5 years ago

The angular example at https://ng-demo.mdbootstrap.com/navigation/sticky-header shows the navigation as sticky/fixed. So your previous answer is incorrect.

Also, where is the source code for that demo? I can't find it in the ZIP file that I downloaded from your site.


Bartosz Termena staff commented 5 years ago

Hi! Thank you for reporting the problem, we will fix documentation bugs.

You can see the source code in documentation page: https://mdbootstrap.com/docs/angular/navigation/navbar/#sticky-top

Best Regards, Bartosz.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.5.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags