Sticky Header on Scroll - when changing browser width the header does decrease but will not increase when changing the browser with back to normal.

[ThorinOakenshiel2]

Hey Guys, maybe you could help me with my Problem

This is my webpage: test.ekg-wissen.ch

I have created this transparent Header (according to this video):

https://youtu.be/ahpiYoGvnrc?si=_12EldeE5BlE2_yx

It uses custom CSS to look like this when scrolling:

This is my CSS code for the Container:

/* Ursprünglicher Zustand des Headers */
.shrinker {
    background: transparent;
    height: 100px; /* Beispiel: Setze deine ursprüngliche Höhe hier */
    padding-top: 12px; /* Ursprüngliches oberes Padding */
    padding-bottom: 12px; /* Ursprüngliches unteres Padding */
    transition: all .2s linear !important;
    -webkit-transition: all .2s linear !important;
    -moz-transition: all .2s linear !important;
}
/* Zustand nach dem Schrumpfen beim Scrollen */
.shrinker.elementor-sticky--effects {
    background: #E9E9E9;
    height: 80px; /* Beispiel: Setze die verkleinerte Höhe hier */
    padding-top: 12px !important; /* Reduziertes oberes Padding */
    padding-bottom: 12px !important; /* Reduziertes unteres Padding */
    box-shadow: 0px 6px 30px -4px rgba(0,0,0,.10);
    transition: all .2s linear !important;
    -webkit-transition: all .2s linear !important;
    -moz-transition: all .2s linear !important;
}
/* Tablet and Mobile Menu Shrinking */
@media screen and (max-width: 1024px){.shrinker {
        height: 100px; /* Setze die ursprüngliche Höhe hier */
        padding-top: 12px; /* Ursprüngliches oberes Padding */
        padding-bottom: 12px; /* Ursprüngliches unteres Padding */
        background: transparent; /* Ursprünglicher Hintergrund */
    }
    .shrinker.elementor-sticky--effects {
        background: #E9E9E9;
        height: 80px; /* Setze die verkleinerte Höhe hier */
        padding-top: 12px!important; /* Reduziertes oberes Padding */
        padding-bottom: 12px!important; /* Reduziertes unteres Padding */
        box-shadow: 0px 6px 30px -4px rgba(0,0,0,.10);
        transition: all .2s linear !important;
        -webkit-transition: all .2s linear !important;
        -moz-transition: all .2s linear !important;
    }
}

This is the CSS Code for my Logo (Image):

/* shrinking logo image */
.shrinking-logo img {
    width: 400px!important;
    transition: all .2s linear!important;
    -webkit-transition: all .2s linear!important;
    -moz-transition: all .2s linear!important;
}
.shrinker.elementor-sticky--effects img {
    width: 300px!important;
    transition: all .2s linear!important;
    -webkit-transition: all .2s linear!important;
    -moz-transition: all .2s linear!important;
}

This is the CSS Code for my Menu:

/* shrinking menu */
.shrinker.elementor-sticky--effects ul li a {
    font-size: .9rem!important;
    transition: all .2s linear!important;
    -webkit-transition: all .2s linear!important;
    -moz-transition: all .2s linear!important;
}

This is my CSS Code for the Search field:

/* Grundlegende Stile für das Sucheingabefeld unter shrinkin-search */
.shrinkin-search .mfn-live-search-wrapper input {
    font-size: 20px !important;
    color: transparent; /* Standardfarbe */
    transition: all .2s linear !important; /* Übergänge für alle veränderlichen Eigenschaften */
    -webkit-transition: all .2s linear !important;
    -moz-transition: all .2s linear !important;
}
/* Stile für den Platzhalter im Suchfeld */
.shrinkin-search .mfn-live-search-wrapper input::placeholder {
    font-size: 18px !important;
    color: gray !important; /* Farbe für den Platzhalter */
    font-family: 'Arial';
}
/* Anpassungen für den Wrapper, der das Suchfeld enthält */
.shrinkin-search .column_livesearch .mfn-live-search-wrapper {
    max-width: 275px;
    height: 40px; /* Ursprüngliche Höhe des Eingabefeldes */
    display: flex; /* Flexbox für zentrierte Ausrichtung */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    transition: height .2s linear !important; /* Weicher Übergang der Höhe */
}
/* Stile für das geschrumpfte Suchfeld, wenn es klebrig wird */
.shrinkin-search .shrinkerersze.elementor-sticky--effects .mfn-live-search-wrapper input {
    padding-top: 20px !important; /* Reduziertes oberes Padding */
    padding-bottom: 20px !important; /* Reduziertes unteres Padding */
    height: 50px !important; /* Neue, geringere Höhe */
    font-size: 16px !important; /* Reduzierte Schriftgröße */
    box-shadow: 0px 3px 15px -2px rgba(0,0,0,.1); /* Subtiler Box-Schatten für den Fokus-Effekt */
}

NOW TO THE PROBLEM
As stated in the title, the header will get smaller if you decrease the size of the browser window.:

But when you increase it again it will look like this:

Or like this:

=> completely cripled.....

I know that breakpoints for mobile clients are not yet optimized, when I turn on responsive settings to disable it on mobile and tablet I still get this Problem. If you decrease the the Browser size slightly, it WILL NOT expand back to it's original size....

Does anybody know how to fix that? I have tried everything and not even ChatGpt has anymore advice for me..

More Screenshots:

 

[ThorinOakenshiel2]

I have found an answer in another forum.
The solution sadly is incredibly simple:

.elementor-sticky { width: 100% !important
}

Now everything works fine..
Maybe I could help someone else with this post too!

Thread can be marked as done.