SOLVED: Icon in Menu is not working correctly

Chrome 110
Windows
URL: Google Chrome 2023-06-03 at...
Screen Recording 2023-06-03...

After installing the v1-8-beta3 the Icon does not work anymore. It just says it is a “button”. And I can’t target it to transform. The screenshots above show the menu in 1.7.3.
After installing, the icon does not transform anymore. Also the hover is not working correctly anymore.

And my WPML menu vanished.

1.7.3: The icon selector is: i.icon-right.menu-icon-svg.ion-ios-arrow-down

1.8. Beta3: The behavior is this: Screen Recording 2023-06-03...
The icon selector is: button

Therefore all my custom css does not work anymore.

And the automatic WPML menu is not there any more.

1 Like

Hi Tobias,
Thanks so much for your report!

The menu markup will change a bit in Bricks 1.8 to increase accessibility and reduce the number of menu styles. The fact that your custom CSS no longer works is certainly annoying, but probably not a drama, as it should be quite easy to adapt.

Can you explain the problem with the WPML menu in more detail and provide a link to your site if necessary?

Best regards,
timmse

Of course it’s not a drama. I didn’t see that the transform can now happen inside of the nav element.
But unfortunately it does not work on hover so far.
But still have to do some more tests.

WPML has the setting " Menü-Sprachumschalter". If you activate this it adds it to the menu without doing it manually. This does not work anymore.

So tested again on another page and

“Rotate X (°)” of the “icon” of the “nav menu” element does not work on hover.
Despite it shows in the builder. But not on the frontend.

Also the icon should rotate already if you hover over the text as well. Not only hover over the icon.

I solved it via custom css:

div.brx-submenu-toggle.icon-right:hover button {
-webkit-transform: rotate(180deg) ;
-moz-transform: rotate(180deg) ;
-ms-transform: rotate(180deg) ;
transform: rotate(180deg) ;

Hi Tobias,
To change the icon transform on hover, you don’t have to add a hover state anymore with 1.8 but just set the “Icon transform (Open)” value. Then it should work.

CleanShot 2023-06-07 at 16.24.16

We are working on the WPML integration anyway and will take a look at the WPML menu issue.

For me, the WPML language switcher inside the “Nav menu” works fine in Bricks 1.8:

Could you share some temporary admin login details with us via email so that we can look at the language switcher setup on your site?

If you only use this, then the hover does not work correctly (for me). You need the hover over the div. Otherwise the icon will not be colored if you hover over the text.

I solved it via adding the code to the menu.

<?php do_action('wpml_add_language_selector'); ?>

I think that is the better way to use the WPML language switcher, because now you can see where it comes from. :smile:

Thank you very much all for your help.

2 Likes

Hi Tobias,
The problem seems to have crept back in due to the changes to the markup. I have added it to the bug tracker.

1 Like

Hi Tobias,
We’ve fixed the icon on hover issue in Bricks 1.8.1, now available as a one-click update in your WordPress Dashboard.

Please let us know if you are still experiencing issues.

Best regards,
timmse

For me it still is not correct. Screen Recording 2023-06-16...

If you hover only over the icon, the text does not changes the color.
It feels especially weird if you use the active color as well.

Hi Tobias,
Can you please create the problem in its simplest form (without any custom CSS or not-related settings) and send us access data by mail to help@bricksbuilder.io?