Topic: Fixed-top navbar issue with animation on page

Siffredi free asked 2 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.)


<nav class="navbar navbar-expand-lg navbar-scroll fixed-top">

Example of animation :

<div class="d-inline-block me-2 me-md-5"

Thank you for your help.

Siffredi free answered 2 years ago


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?

Siffredi free answered 2 years ago


here is the site under construction concerned (it may be easier than a snippet):

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.

Michał Duszak staff answered 2 years ago

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

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

  • 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