Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: dark waves on navbar ?

Maxime Hebrard free asked 6 years ago


I start from MDB-Gulp-Free package.

I use a navbar element. I do not specify any waves in my code (but I am happy the waves-effect is present) I wish to have a white navbar ( I specify the class "white" in )

my problem is that the default ripples are "waves-light" and so the effect is white. on white background, it is not visible.

Is there a way to set the navbar waves to dark ?

Snipplet


Maxime Hebrard free answered 5 years ago


Thanks @Piotr Glejzer to point the right css classes.

In a more general way, I wonder why there is classes .waves-effect .waves-light that are automatically added to the <a> (when inspecting the code source).

Your solution actually "hack it" by adding a colored waves-effect to the parent <li>. As I noticed that waves-light is the default class added to the code, I can just redefine the ripple color of this effect as I wish.

// Ripple
.waves-effect.waves-light .waves-ripple {
    background-color: rgba($secondary-color, .7);
}

Piotr Glejzer staff answered 5 years ago


Hi,

I modified your snippet with extra CSS, may you check that?

Here is a link: Snippet

Best,
Piotr



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: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.6.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 7
  • Provided sample code: No
  • Provided link: Yes