1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
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 ( https://mdbootstrap.com/previews/docs/latest/html/navbar/navbar-sticky-top.html ), but it's not working for me. I have made a small demo here : https://biok03.github.io/CHBE-Website-3/demo3.html The corresponding code can be found here : https://gist.github.com/BioK03/24fd5fe3d6ed04f1d8a2cfd14d87bf62   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 : https://mdbootstrap.com/components/navbar/#placement ), 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 !
Write
Create snippet
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
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags
About author
BioK03
Pro User 17Support score
3Questions 4Answers 0Snippets