Hi Nicole,

Sorry, I know what happended, It's becuase new version of template uses new Font Awesome v5, not 4.7 as it was. And FA developer made a huge changes (and bigger mess).

Give me 3min to prepare Custom CSS fix for you.

Thanks!!! Now it works fine.

• Nicole

Nicole, please add also 2nd part of CSS code!

Thanks.

Thanks very much.

Now I have a problem with the off canvas menu function in the mobile view.

Can you have a look?

• Nicole

Have you used all CSS code that I gave you?

No, that's why! Please copy-paste all lines.

Yes, I have.

The off canvas menu doesn't work on mobile view.

Opss, ... extra two lines are needed. To reduce confusion please copy & paste the whole over the old one:

.sp-megamenu-parent > li.sp-has-child > a::after {
  font-family: "Font Awesome 5 Free";
  content: "\f107"; font-weight: 600; }

@media screen and (max-width: 940px) {
.hidden-sm.hidden-xs { display: none; visibility: hidden;}
.offcanvas { visibility: visible;}
.offcanvas-menu .offcanvas-inner .sp-module .sp-module-content > ul {display: block; }
}

Thanks

yeah! thanks!!

Now it works fine.

I still have trouble with another template. After the update, the off-canvas menu has completely disappeared in the mobile view. I checked the template settings. They are correct.

• Nicole

.burger-icon { width: 25px;cursor: pointer; }

#offcanvas-toggler {
  display: flex !important;
  width: 25px;
  align-items: center;
  position: initial !important;
}

.burger-icon > span {
  height: 2px;
  background: whitesmoke;
  display: block !important;
  margin: 5px 0;
  width: 25px;
}

After

Thank you very much.

Now you can see the off-canvas menu in the desktop view.

• Nicole

In that case small correction is needed (NEW code):

.burger-icon { width: 25px;cursor: pointer; }
.burger-icon > span { height: 2px;  background: whitesmoke; 
display: block !important; margin: 5px 0; width: 25px;}

@media screen and (max-width: 990px) {
#offcanvas-toggler {
  display: flex !important;
  width: 25px;
  align-items: center;
  position: initial !important;}
    }

it should help, if not ... all .burger-icon classes must be inside { } of @media.

Now, it is perfect!

Thanks for your support!

• Nicole

Have a wonderful weekend.

You're welcome.

It's quite easy ....

from current template (file template.css) copy from line 1666 to 1741, and then use it inside new template (custom.css). It should be all you need to get those shapes..

remember that class name "variation-applanding" must be in body class - but it should be even in new theme.