Fixed-top navbar issue with animation on page


Topic: Fixed-top navbar issue with animation on page

Siffredi asked 3 years ago

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.


Michał Duszak staff answered 3 years ago

Hello, could you please provide a snippet, as I'm unable to reproduce this behaviour?


Siffredi answered 3 years ago

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 3 years ago

Hello, it works fine for me on my android phone with chrome.


Siffredi answered 3 years ago

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 3 years ago

Hello, I am still unable to reproduce this issue. Is there any error in the console? What is it saying?


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
  • User: 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