Sticky-top navbar not working with last version ?

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

BioK03 pro asked 8 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.

Add comment

Marta Szymanska answered 8 years ago

1 0 Best answer

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 8 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 Szymanska commented 8 years ago

Hi, I'm glad it is working now.

Add comment

ashleyww93 answered 8 years ago

0 0 Best answer

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 8 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 !

Add comment

COTIGA answered 7 years ago