Topic: Sticky-top navbar not working with last version ?

BioK03 pro asked 6 years ago

Hello ! I'm unable to get a sticky-top navbar working with the last version of MDBootstrap. I copied the code from the official demo ( ), but it's not working for me. I have made a small demo here : The corresponding code can be found here :   Thank you in advance for any help, I must be forgetting something.

Marta Wierzbicka staff answered 6 years ago

Hi, could you tell me what is the exact version of MDB you use? You can find this in README.txt file. I pasted your code to the MDB Pro 4.4.3 version and it works fine, I mean the navbar is sticky, so except your version I need more information from you because I can't reproduce the problem. Best, Marta

BioK03 pro commented 6 years ago

Hello Marta, thank you for your help. In fact, I have put the rule overflow-x:hidden; on the body of my page, and this is the cause of this "bug". I removed it and it works ! Good to know now, I apologize for your time, I better remove all my personal scripts and styles next time :) Have a good day !

Marta Wierzbicka staff commented 6 years ago

Hi, I'm glad it is working now.

COTIGA free answered 5 years ago

Keep sticky-top and delete <header> surrounding the Navbar

Marta Wierzbicka staff commented 5 years ago

Thanks for the solution.

ashleyww93 free answered 6 years ago

Hi BioK03. I checked your example and the classes you use in your nav tag are incorrect. You have: navbar sticky-top navbar-expand-lg navbar-dark cyan lighten-3 When it should be: navbar fixed-top navbar-expand-lg navbar-dark cyan lighten-3 I tested this in chrome with Inspect element & live editing.   I hope this helps :)

BioK03 pro commented 6 years ago

Hello Ashleyww93, thank for your help, but I'm talking about sticky-top ( third in this section : ), not fixed-top. The behavior is the same in the example, but I have to use the sticky-top one for my project :) (the sticky-op behavior permits to stick the navbar on top of the page when we scroll a bit, not directly at the initial state of the page) Thank you for your time, Marta and me solved the problem, it was a conflicting CSS rule. Have a good day !

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 jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes