White bar at top of screen when scrolling – sticky header with transition

When I scroll down this white bar appears at the top of the screen and it stays there

I have a sticky header that dissapears on the scroll down and appears on scroll up and when at the very top of the screen it its translucent

I have a bottom margin of -110 so the background starts in the header and the header is set to min height 90 px (I think them not being the same is causing issue but if I change either one of these values the previous container does not start at the top)

Here are screenshots

https://preview.redd.it/wxggldwswced1.png?width=1901&format=png&auto=webp&s=85549beebe789d56ff8e5364271a8a61d8d918b5

https://preview.redd.it/d2af8e7uwced1.png?width=1928&format=png&auto=webp&s=b45950400dedbbd22345900ff7ae1246add1fd6b

https://preview.redd.it/749zbyruwced1.png?width=1888&format=png&auto=webp&s=b1b9d6dec2d5b5659067519352a3829448454e50

Here is my CSS

.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;

}

thanks in advance for any help