Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I programmatically change the color of the hamburger menu icon?

I’m trying to change the color of the hamburger menu icon in a mobile view using Velo in Wix. However, when I attempt to set the color using the following code:

$w.onReady(function () {
    $w("#menuToggle1").style.color = "red";
});

I receive the error: Property ‘style’ does not exist on type ‘HiddenCollapsedElement’.

I understand that the style property is not applicable here. What is the correct way to change the icon color of the menuToggle component programmatically? Any guidance or examples would be greatly appreciated!

Tags:

2

Answers


  1. 0

    Try using the setStyle method as follows:

    $w.onReady(function () {
    let menuToggle = $w("#menuToggle1");

    if (menuToggle) {     
        menuToggle.style.backgroundColor = "red"; 
    }
});
    Login or Signup to reply.
  2. 0

    It doesn’t look like menu elements have a style property or have CSS support in Wix. So you can’t actually change the color of the element at runtime. As a workaround, you can duplicate your menu, change the color in the editor on the duplicate, and hide/show the menus accordingly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search