Change menu background colour

Ask the community
,
1

Hi,

I have a code that is working fine and changes the header color when the scroll enters the anchor viewport.

Need to also change the background color of the menu that i have added to the header.

export function

anchor1_viewportEnter(event) {
    $w('#header1').style.backgroundColor = "blue"
    $w('#header1').style.backgroundColor = "rgb(19,35,51)"
      
        
    }

Looks to be pretty simple but not able to figure it out.

1462×807 75.1 KB

2

Hi @jignesh ! To change the background color of the menu added to the header, you need to find the element ID or class name of the menu and use the same method as you did for the header.

3

Thanks for the reply.

But when I do that, it does not show me the .style option.

seems the menu is not support that with the menu element

4

If it dont work, move a Strip in to the header and make it with that.

5

Thanks again.

However, it even after adding it to strip i am unable to get the .style option.

I want to add the menu to a strip and on scroll to change the background color of both the strip and the menu.

6

Like you already assumed → the MENU-element has no → STYLE-attribute.

But what bamuu wanted to tell you is to add a STRIP behind your menu, or to describe it in another way → put your MENU onto the STRIP.

Now your MENU should be inside of the STRIP.
Change the DESIGN of your MENU to → TRANSPARENT (property-panel).
Now you can’t see the colors of your MENU, but you can see the backgroundcolor of the STRIP.

The STRIP-element has the → .style -attribute. Using this WORKAROUND, now you are able to control the backgroundcolor of the STRIP, simulating the colorization of your MENU.