Header fixieren / Garkein Sticky darstellen

Hallo,

ich würde gerne den Header so fixieren das er oben im Shop stehen bleibt. Wenn man also runterscrollt soll er komplett einklappen und nicht mehr zu sehen sein bis man wieder nach ganz oben scrollt.
Ist das mit einfachen Mitteln machbar ?

Shop ist: handon.de falls sich jemand ein Bild machen möchte!

Danke schonmal!

 

Hallo Barbara,

schön das ich direkt deine professionelle Hilfe in Anspruch nehmen kann !!

Okay, als es ist jetzt eingeklappt aber die Kategorieleiste klappt nicht mit ein. Hättest du dafür vielleicht auch noch eine Lösung ?

LG

 

Okay,

leider hat das nicht geklappt..

Könnte es sein dass es nicht geht weil wir selbst CSS Anpassungen gemacht haben ?

Hier der Code von "Eigene CSS"

Code:

.pageup.visible{
    display:none !important;
    }
 
@media (min-width:768px){
.gm-cart-basket-ed:before {
    content: '';
}}
@media (max-width:767px){
.gm-cart-basket-ed:before {
    content: '';
}}

.gm-cart-basket-ed{height:20px; margin-top:20px; position:absolut; margin-left:40px; margin-bottom:0px; colour: #ffffff;}

.cart-products-count{ display: none !important;}

#cart-container.navbar-cart {width: 200px; height: 50px; margin-top: 0px; margin-left: 1100px }

#cart-container.navbar-cart > ul > li > a.dropdown-toggle, {
    color: #ffffff; }

.navbar-brand { position: float; margin-top: -15px }


@media (min-width: 1200px){
.productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image {
    width: 25%;
}
.productlist-viewmode-list .product-container .inside .content-container .content-container-inner .price-tax {
    width: 25%;
}}

Bzw. errinnere ich mich dass wir eine Anpassung per CSS gemacht haben ( vielleicht auch direkt in den templates) damit die Kategorieüberschriften keinen Hovereffekt mehr haben/ die Farbe wechseln wenn man draufklickt,
Leider bin ich aber auch nicht genug mit CSS bewandert um den Code für eine solche Anpassung schreiben zu können ..

Danke schonmal für die Hilfe !

 

Hab beide Cache geleert und 2 vers. Browser benutzt, leider immernoch keine Änderung :/

 

Link ist: https://www.handon.de/

 

Aber wenn du runterscrollst, kommen dann die Kategorien und das Logo mit runter oder wird alles eingeklapppt und ist nicht mehr sichtbar ?

Super, danke für den Tipp mit dem Warenkorb , werde es gleich mal ändern!

 

Danke schonmal für die Hilfe, doch leider bin ich immernoch nicht weiter gekommen..
In der Gambio-Anleitung wird das Problem nicht aufgefasst..

Ich habe jetzt mal versucht mir was zusammen zu schustern, ihr könnt ja mal sagen ob es Sinn ergibt:

Code:

#navbar-categories.sticky {
#level-1.nav.navbar-nav > ul > li > a.dropdown-toggle {
            color: $text-color;
        }
}

Denn bei mir bleibt das horizontale Menü eben, trotz der Einstellung von 0px Sticky im Styleedit, beim runterscrollen oben auf der Seite und klappt nicht ein.


Zudem würde ich gerne den Schatten der Header-Box entfernen. Gibt es dafür eine leichte Lösung oder müsste man das wieder per CSS einfügen ?

Link: https://www.handon.de/

 

Wenn der Header nicht Transparent ist, z.B Weiß, dann sieht es so aus:
Bild1 Normal
Bild2 Sticky

 

Bei neuem Style, aber auch mit "transparentem Header" klappen Topbar und horizontales Kategoriemenü ein, ist also schonmal top!
Jetzt ist halt die Frag wie es es schaffe den Fehler auszumerzen..
Irgendeine Anpassung oder so scheint also nicht zu funktionieren.
Ich habe den Shop praktisch nochmal in einem neuen Style erstellt und fast alle Parameter kopiert. Das Aussehen ist aber leider nicht das gleiche..

Ist nun fraglich ob es zeitsparender ist, den vorhandenen Style zu durchsuchen ( was bis jetzt nicht zu erfolg geführt hat) oder den neuen Style so umzubauen das er unseren Erwartungen entspricht..

Eine Idee hab ich noch:

Beim duplizierten Shop mit Style "Transparenter Header" war folgender Code in der CSS Zeile:

Code:

@media (min-width: $grid-float-breakpoint) {
    .navbar-categories {
        background-color: transparent;
        .navbar-nav {
            @include border-radius(5px);
        }
    }
    #cart-container.navbar-cart > ul > li > a.dropdown-toggle {
        color: #fff;
        text-shadow: 1px 1px 3px #000;
    }
    #header.sticky {
        #cart-container.navbar-cart > ul > li > a.dropdown-toggle {
            color: $text-color;
            text-shadow: none;
        }
    }
}

Könnte es sein dass dieser Code den Header und den topbar einklappen lässt ?

Danke schonmal!

 

Aber in dem neu angelegten Style ist es das einklappen ja auch möglich trotz dem Style " transparenter Header"