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

CSS:

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 : https://savoie.ialpes.com/visites/visites-incontournables-savoie.html Thank you and good day.

Alain


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 https://savoie.ialpes.com/visites/visites-incontournables-savoie.html 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.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

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