Topic: transparent Navbar do not change

LAGIER priority asked 6 months ago

Comportement attendu Navbar-Scroll transparent

*Comportement réel*Sorry for the inconvenience, I found the solution for the Photo Gallery.

I have another problem with the transparent Navbar which remains transparent with the Scroll does not change color even though it should become blue: background-color: #3B71CA I don't have this problem with version MDB 6, but with MDB 7.1 which I am starting to implement.

Ressources (captures d'écran, extraits de code, etc.) HTML Et Aussi... Galerie NOS SITES


Code navbar-scroll: @charset "utf-8"; .navbar .nav-link{color:#fff!important} /* CSS Document / / Color of the links BEFORE scroll */ .navbar-scroll .nav-link, .navbar-scroll .navbar-toggler .fa-bars { color: #FFF; }

/* Color of the links AFTER scroll */ .navbar-scrolled .nav-link, .navbar-scrolled .navbar-toggler .fa-bars { color: #FFFFFF; }

/* Color of the navbar AFTER scroll */ .navbar-scrolled { background-color: #3B71CA; }

/* An optional height of the navbar AFTER scroll */ .navbar.navbar-scroll.navbar-scrolled { padding-top: 5px; padding-bottom: 5px; }

JS MDB 7.1

URL : Thank you and good day.


johanvdend priority answered 6 months ago

The example on the MDB website does not work. Please fix it.

Kamila Pieńkowska staff commented 6 months ago

We are going to fix this as soon as possible.

LAGIER priority answered 6 months ago

Hello Kamila,

Thank you for your time in responding to me. I included your JS but it doesn't work. I give you below the CSS and JS codes of MDB used and the navbar code.

The link to the page works under MDB 7.1 and transparency with color change when scrolling does not work. The navbar-scroll CSS code works perfectly with earlier versions of MDB version 5 and 6., but not with version 7 and 7.1. Calling the CSS used:

CSS navbar-scoll: @charset "utf-8"; .navbar .nav-link{color:#fff!important} /* CSS Document / / Color of the links BEFORE scroll */ .navbar-scroll .nav-link, .navbar-scroll .navbar-toggler .fa-bars { color: #FFF; }

/* Color of the links AFTER scroll */ .navbar-scrolled .nav-link, .navbar-scrolled .navbar-toggler .fa-bars { color: #FFFFFF; }

Calling the JS used:

Your code: // Initialization for navbar mdb.Navbar.getInstance(document.querySelector('.navbar')).init();

MDB 7.1 code (ok)

// Initialization for ES Users import { Lightbox, initMDB } from "mdb-ui-kit"; initMDB({ Lightbox });

CODE the DIV navbar Double fixed top: And Also... Gallery OUR SITES

I have a solution, but it uses code outside MDB, which is not the best.

Thank you for your help, and have a great day. Alan

Kamila Pieńkowska staff commented 6 months ago

You need to add data-mdb-navbar-init to the .navbar and the solution I provided earlier will work.

Kamila Pieńkowska staff answered 6 months ago

Navbar needs to be initiated so please add: mdb.Navbar.getInstance(document.querySelector('.navbar')).init();

LAGIER priority commented 6 months ago

Hey Kamila, I found the solution. It was hidden in the following code MDB 7.1 -> js -> modules -> navbar.min . I set up the link to the JS folder and it works perfectly.

Thank you for your help and sorry for taking up your time.

Have a nice day and have a great holiday.

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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: computer
  • Browser: Chrome, Edge, Firefox
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: Yes