Off-Canvas - Megamenu - Color - Question | JoomShaper
Back to the questions

Off-Canvas - Megamenu - Color

J

Jasmin

Helix Framework 11 months ago

Hi, i have now enable megamenu. I have now also managed to open the menu when clicking on the text.

But I have 2 problems: 1: If the menu is only clicked on, the dropdown menu opens. If the menu is clicked again, the menu closes, but the text remains highlighted in colour. Could it be changed to only coloring when a site is open of the menu. https://prnt.sc/mj2w8lNbhkn_

2: If an item is selected in the drop-down menu and you look in again, all drop-down menus are highlighted in colour. Not just the open one. https://prnt.sc/WvX0aG-_FJKJ

My current custom CSS:

body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.nav-header>.menu-toggler, body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler, body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler {
width: 100%;
text-align: right;
}

Thank you! Best regards.

0
Website
https://copy-fax.at/
6 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 11 months ago #176753

Hi Jasmin.

So I assume that you want to change colors, try that

.offcanvas-menu .offcanvas-inner ul.menu > li a:focus, 
 .offcanvas-menu .offcanvas-inner ul.menu > li span:focus {color: black;}
0
J
Jasmin
Accepted Answer
11 months ago #176756

Hi Paul, thanks for the quick reply.

The code works well, but unfortunately only for the PC version. It does not work for the mobile version.

However, problem no. 2 is not yet solved (see screenshot above). When I open the ‘Kopier- und Drucksysteme’ page, both entries are highlighted in colour (‘Kopier und Drucksysteme’ and ‘Zeitsysteme’).

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 11 months ago #176767

Mobile Browsers also loves to cache CSS styles, so it's better to reload screen 3x to see changes.

Maybe after all easier would be just remove that blue color in mobile menu in total. 

.offcanvas-menu .offcanvas-inner ul.menu li.active a {color: #000;}

.offcanvas-menu .offcanvas-inner ul.menu li a.active  li a,
.offcanvas-menu .offcanvas-inner ul.menu > li a:hover, 
.offcanvas-menu .offcanvas-inner ul.menu > li a:focus, 
.offcanvas-menu .offcanvas-inner ul.menu > li a  li a, 
.offcanvas-menu .offcanvas-inner ul.menu > li span:hover, 
.offcanvas-menu .offcanvas-inner ul.menu > li span:focus {color: #111;}
0
J
Jasmin
Accepted Answer
11 months ago #176776

Unfortunately, loading 3x and deleting the cache did not help. I have now removed the blue colour. As the text colour is not black by default but very dark grey, the hover is now black.

But I'm not happy with that. Now I think ok, lets underline ist. But it look like this: https://prnt.sc/coeMfjT43SBX (Screenshot is from PC not mobile).

You can't tell which side is currently open. It works in the megamenu.... I think it is important to know which site is active...

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 11 months ago #176809

.offcanvas-menu .offcanvas-inner ul.menu > li a {color: #111;}

OR

.offcanvas-menu .offcanvas-inner ul.menu > li a {color: #000;}

Will set default menu link very dark grey or black, as you wish.

0
J
Jasmin
Accepted Answer
11 months ago #176818

Hello,

Yes, that's all right. But it does not solve the main problem. You cannot recognize which page has been opened or is active.

See screenshot: https://prnt.sc/cmZcX71FTA6O

When I open page 1 and look into the offcanvas menu, page 1 and page 2 are active (underline).

Is there a trick here? Have I set up the parents incorrectly?

0