Dropdown or Modal as a Megamenu: active particles?

[Misho]

Hi!

I am building a Mega Menu using the Modal Element. It is playing a role of a navigation button, next to the rest of the navigation.

My menus have the primary particle staying active on the clicked page, to indicate where the visitor is. Dropdown toggle on the other hand only has hover interactions.

I have tried to play with CSS combining the page-id and x-always-active, but nothing so far.

Would you perhaps have an idea how to make the dropdown toggle primary particle staying active on certain page(s)?

Thank you!

[tristup]

Hi @Misho,

Thanks for explaining the issue in detail, but it will be very difficult to recognize the issue without investigating it through the admin dashboard. Can you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– Specific page URL and section which has the broken SVG
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Misho]

Sure! Added!

[ruenel]

Hey @Misho,

Thanks for writing in!

You cannot use x-always-active because it is not active. You may use this custom CSS instead:

.page-id-13 .x-anchor-toggle.has-particle [data-x-particle][data-x-particle*=scale]{
    transform: scale3d(1, 1, 1);
    opacity: 1;
}

The code above serves as an example. Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Kindly let us know how it goes.

[Misho]

This is great! I got almost to it. Thank you!

I am still trying to leave only the primary particle active, and hide the secondary one on the page where it applies.

I have trid this:

.page-id-13 $el .x-particle.is-secondary {
  opacity:0 !important;
   transform: scale3d(-1, -1, -1)
}
.page-id-13 $el:hover .x-particle.is-secondary {
  transform: scale3d(1, 1, 1) !important;
  opacity: 1 !important;
}

That kind of does the job, but the interaction of the secondary particle is not original, when hovered. Same is with display:none, of course.

If it is not complicated, it would be great if you have a solution for it. If not, never mind, this is good enough.

Thanks again!

[tristup]

Hi @Misho,

Glad that we are able to help you to some extent.

Thanks