[ad_1]
[ad_2]
Ive tried to create an adaptive header, however when I scroll ive gotten the nav menu to change colour, however when I apply the same method to the icon and button nothing changes, any help is greatly appreciated!
all have css class as header-text
here is the css used
.logo img {
max-width: 140px;
height: auto;
transition: all 1s ease;
}
.elementor-sticky--effects .logo img {
max-width: 120px;
height: auto;
}
.scrolling-header {
transition: all .5s ease!important;
}
selector.elementor-sticky--effects{
background-color: rgba(255,255,255)!important
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 90px;
}
.elementor-sticky--effects .logo img {
max-width: 120px;
height: auto;
}
.elementor-sticky--effects .header-text ul li a {
color: #7a7a7a!important;
}
Here is a screenshot of how the containers are organized
Screenshots of button, icon, and menu colours and CSS classes
