transparent Navbar do not change

Topic: transparent Navbar do not change

LAGIER priority asked 9 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

Add comment

johanvdend priority answered 9 months ago

1 0 Best answer

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

Kamila Pieńkowska staff commented 9 months ago

We are going to fix this as soon as possible.

Add comment

LAGIER priority answered 9 months ago

0 0 Best answer

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 <a href="https://savoie.ialpes.com/visites/visites-incontournables-savoie.html" target="_blank" rel="nofollow">https://savoie.ialpes.com/visites/visites-incontournables-savoie.html</a> 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

Please insert min. 20 characters.

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 9 months ago

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

Add comment

Kamila Pieńkowska staff answered 9 months ago

1 0 Best answer

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

LAGIER priority commented 9 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.

Add comment

Write

Create snippet

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

LAGIER

224Support score
22Questions 23Answers 2Snippets