Angular directive mdbStickyHeader is not working

Topic: Angular directive mdbStickyHeader is not working

varghesep premium asked 4 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.

Add comment

Bartosz Termena staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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 4 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 4 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.

Add comment