Staff replied Templates

Off-Canvas Menu Link Colors

Asked by Jeffrey Kiefer 4 years ago Last activity 4 years ago

Using Helix 2.0.10 with default template. I have modified the off-canvas menu with custom css that I reveived from a previous post. I have discovered that the css is incomplete as it does not include the sub-menu link colors.
I use this css so far

.offcanvas-menu .offcanvas-inner .sp-module ul > li a,
.offcanvas-menu .offcanvas-inner .sp-module ul > li span { color: white; }
.mt-ld-main_stats .output {
    font-weight: 500;
}

Here is a screen shot of my issue
Screenshot

I would like to know what css to add to change the sub-menu link colors and also what css to change the X that closes the off-canvas menu to a different color.
Link to website

5 replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
4 years ago

Hi,

Thanks for contacting us. I will check and get back to you soon.

-Regards.

Paul Frankowski Senior Staff
4 years ago · edited

If I may...

(x) - close color icon

.offcanvas-active .burger-icon > span, 
#modal-menu-toggler.active .burger-icon > span {
  background-color: red; }

This tip we have it in Helix documenation > section "Customization Tips" > Tip 5.

Paul Frankowski Senior Staff
4 years ago · edited

About 2nd question:

.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler, 
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler {
  color: whitesmoke;
}
.offcanvas-menu .offcanvas-inner ul.menu > li li a {
  color: whitesmoke;
}

Added to documenation few minutes ago ;)

tip #7. >> https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/customization-tips

You have new colors on your site, I added them.

Jeffrey Kiefer Asked this
4 years ago

Thank you so much!
It is all perfect.
Can the down arrow (showing sub-categories) also be set to use the (X) color?

Paul Frankowski Senior Staff
4 years ago

Sure. Just add a new line.

 .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler  {
  color: red !important; }
Log in to reply.