Topic: transparent Navbar do not change
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
The example on the MDB website does not work. Please fix it.
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 1 year ago
You need to add data-mdb-navbar-init to the .navbar and the solution I provided earlier will work.
Navbar needs to be initiated so please add:
mdb.Navbar.getInstance(document.querySelector('.navbar')).init();
LAGIER priority commented 1 year 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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