Bug - Menu OffCanvas - Question | JoomShaper

Bug - Menu OffCanvas

E

Erivelton

Helix Framework 8 months ago

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.

0
7 Answers
MiBa
MiBa
Accepted Answer
8 months ago #183329

Check your custom.css

@media (max-width: 992px) { .offcanvas-menu { background-color: var(--maincolor); color: #fff; }

0
E
Erivelton
Accepted Answer
8 months ago #183330

No, there is no code similar to the one you requested to check.

0
Pavel
Pavel
Accepted Answer
8 months ago #183337

Hi. Try this

.offcanvas-menu {
    background-color: violet;
}
0
Pavel
Pavel
Accepted Answer
8 months ago #183338

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.

1
MiBa
MiBa
Accepted Answer
8 months ago #183344

Let's try this way:

  1. in the administrator area click on "Site Templates"
  2. click on your template name (ziptech ?)
  3. in editor tab open folder css located in the template folder
  4. locate custom.css file and click on the name
  5. in the editor area find row 507 and replace var(--maincolor) with #000 to get black backround
  6. save and see at the frontend

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 8 months ago #183347

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;}
0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 8 months ago #183349

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:

  1. https://www.joomshaper.com/documentation/helix-framework/customization-tips#how-to-change-the-color-of-offcanvas-menu-icon-usead-in-header (we presented color settings in Presets)
  2. https://www.joomshaper.com/documentation/helix-framework/customization-tips#how-to-change-background-color-of-offcanvas-menu (CSS method)

And no it wasn't a bug, but sort of design concept.

You're welcome.


Thanks for all users that shared here tips.

0