Hello everyone, please help me identify where the error is so that my offcanvas menu (mobiles) has no color in the background, making the user experience on my website difficult.
I have already read all the documentation but I cannot find the solution to this problem.
I can't update my SP Page Builder and Helix now because I have noticed that it messes up my entire layout.
Check your custom.css
@media (max-width: 992px) {
.offcanvas-menu {
background-color: var(--maincolor);
color: #fff;
}
No, there is no code similar to the one you requested to check.
Hi. Try this
.offcanvas-menu {
background-color: violet;
}UPD
Here is this part in your custom.css
But you have not --maincolor variation in your vars set. So the code does not work.
So this is your mistake but not a bug.
Just so you know, it’s best to place variables at the top of the document and media queries at the bottom.
Media queries must have a certain order. I noticed that your custom.css file could use some organization, as there’s quite a bit of unnecessary code.
Let's try this way:
I also suggest using color hex code, not unknown "maincolor" value. In your case, should be dark color.
@media screen and (max-width: 992px) {
.offcanvas-menu {background-color: black; background: black;}
}Use that in custom.css file in line 505
You can also use
background: rgba(0,0,0,0.7);
To recolor blue color for active menu item to yellow use:
.offcanvas-menu .offcanvas-inner ul.menu li.active a {
color: yellow !important;}About
I have already read all the documentation but I cannot find the solution to this problem.
Have you seen those? If not, read more here:
And no it wasn't a bug, but sort of design concept.
You're welcome.
Thanks for all users that shared here tips.