plugins – Make Nav-Bar text change color when scrolling with CSS

I have a header that is transparent but becomes solid when scrolling, the problem arises because the Nav-Bar menu text color does not change along with the transparency of the header, theres multiple reasons why one would need this to happen.

So I am trying to make the Elementor Nav-Bar menu text change color when scrolling and i was wondering i could repurpose the CSS for the transparency of the header to fit this new purpose, i just don’t know how.

The following CSS is for changing the transparency when scrolling:

selector.elementor-sticky--effects{
background-color: rgba(255,255,255,255)!important
}

selector{
transition: background-color 1s ease !important;
}

selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}

selector > .elementor-container{
transition: min-height 1s ease !important;
}

I need the above CSS to be repurposed to work so it changes color of the Nav-Bar instead of the background-color for transparency.

Here is the CSS for just setting the color of the Nav-Bar:

.elementor-nav-menu a {
    color: #001C38 !important;
}