Search code examples
htmlcsswordpressheaderfrontend

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 headers 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 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;
}
Solution

  • I figured it out, the scrolling effect were a part of Elementors plugin for wordpress.

    the nav bar items are links therefore i could just target them with this

    selector.elementor-sticky
--effects a,selector
.elementor-sticky--effects i{
    color: #001C38 !important;

    and have the same effect by to it as the other scrolling effect because of --effects