Nav Block Modal Color Issue

[shopbauer]

Hello, I have the following problem:

My website should be in dark mode. I have added the nav block to my header. If I want to change the colors I can change this in the style options. I have tried to change the color of the modal of the nav block. When I change the color I see direct effects in the editor. Everything seems to be fine there. But when I load the page I see that my modal is white and takes the settings from (.cc-nav).

Am I doing something wrong or is this a bug?

WordPress version: 6.4.3
Cwicly Plugin version: 1.4

[StrangeTech]

Hi @shopbauer,

@shopbauer

My website should be in dark mode.

Just to confirm, are you saying you have switched on dark mode from the global toggle or did you trigger it some other way (e.g. by adding the dark class to a container)?

Either way, you may also want to check you have not toggled the switch for the individual block to light mode:

You also may want to check if this confirmed bug is related to your issue:

Dark mode not keeping dark / light mode after page reloade and premade toggle not working

Description: Hello I sm working on this site - https://staging18.dreamaudio.eu/ I implemented dark mode for now it works only in automatic mode how it should. But when I toggle .dark class it doesnt stay in this state after clicking on other links (for example product.) Next I was not able to figure out how to make premade toggle working. I made my own click action and it works but after each load it is being reset in original state which is dictated by OS. Here is video of my issue. (Or A…

[Louis]

Hello @shopbauer,

This does sound unusual.
@StrangeTech has given some nice hints as to why this might be happening.

You might also want to send us (support@cwicly.com) a frontend link so that we can check things out for you.

Cheers,

[shopbauer]

It seems that this class overwrites everything:

@media screen and (max-width: 992px) {
.cc-nav[breakpoint=md] .cc-nav-wrapper {
position:fixed;
top: 0;
min-height: 100vh;
max-height: 100vh;
background-color: #fff;
Visibility: hidden;
max-width: 100%;
Width: var(–cc-nav-m-width,400px);
z-index: 100;
padding-top: var(–wp-admin–admin-bar–height,0);
transition-duration: var(–cc-nav-modal-animation, .4s);
overflow-y: auto;
overflow-x: hidden
}

[shopbauer]

If I overwrite CSS in the nav block, it works with the color.

@media screen and (max-width: 992px) {
.cc-nav[breakpoint=md] .cc-nav-wrapper {
background-color: #0074e4;
}