transparent Navbar do not change

Topic: transparent Navbar do not change

LAGIER priority asked 11 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 11 months ago

1 0 Best answer

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

Kamila Pieńkowska staff commented 11 months ago

We are going to fix this as soon as possible.

Add comment

LAGIER priority answered 11 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 11 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 11 months ago

1 0 Best answer

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

LAGIER priority commented 11 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
25Questions 30Answers 2Snippets