Topic: Fixed-top navbar issue with animation on page
Expected behavior
Hello, I am using animations on my pages, and a navbar with the fixed-top attribute. The navbar should remain visible while scrolling.
Actual behavior
My navbar temporarily disappears when I scroll the page and an animation starts. When it reappears it happens that the toogle button is no longer displayed.
Resources (screenshots, code snippets etc.)
MDB5-STANDARD-UI-KIT-Pro-Advanced-3.9.0
<nav class="navbar navbar-expand-lg navbar-scroll fixed-top">
Example of animation :
<div class="d-inline-block me-2 me-md-5"
data-mdb-toggle="animation"
data-mdb-animation-start="onScroll"
data-mdb-animation-show-on-load="false"
data-mdb-animation="tada"
data-mdb-animation-delay="500">
Thank you for your help.
Hello,
after several tests I notice that the problem only appears with the "Fade" effects.
On my page I replaced the "Fade" effects with "Slide" and more problem.
There must therefore be a compatibility problem between the "Fade" effects and my class = "navbar navbar-expand-lg navbar-scroll fixed-top"
Indeed the navbar always disappears on my phone when the image effects are triggered. It reappears afterwards but often without the menu button.
I also tried without "navbar-scroll" but it doesn't change anything.
Michał Duszak staff commented 2 years ago
Hello, I am still unable to reproduce this issue. Is there any error in the console? What is it saying?
Hello,
here is the site under construction concerned (it may be easier than a snippet): https://rideauprofilage.com
The problem happens on my android phone with chrome, on the small size pc it works fine.
Thank you.
Michał Duszak staff commented 2 years ago
Hello, it works fine for me on my android phone with chrome.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: Android
- Browser: Chrome
- OS: MIUI 12.5.1
- Provided sample code: No
- Provided link: No