Header einrichten

Habe ich! Dann Cache geleert; Browser Cache geleert; Seite aufgerufen, ganz doll draufgeglotzt, keine Veränderung endeckt! Muss noch mehr getan werden um diesen "Style" auch anwenden zu können?

 

Ich tippe mal, dass die CSS-Selektoren nicht stark genug sind, sodass sie die originalen Styles nicht überschreiben können. Versuch mal folgendes:

Code:

body #outer-wrapper {
    width: 100%;
    background-color: transparent;
   
    #header {
        background-color: $gx-wrapper-bg;
       
        .inside {
            margin: 0 auto;
           
            @media (min-width: $screen-sm-min) {
                width: 750px;
            }
           
            @media (min-width: $screen-md-min) {
                width: 970px;
            }
           
            @media (min-width: $screen-lg-min) {
                width: 1270px;
            }
        }
    }
   
    #wrapper {
        background-color: $gx-wrapper-bg;
    }
}

 

Ich habe den Code eingefügt. Das Ergebnis kommt nahe an meine Vorstellung heran, es fehlen aber noch 3 Dinge.

1. Wäre schöner, gäbe es eine Trennung zwischen Header und Restshop. Ähnlich wie unten zwischen Shop und Footer. (Nicht ganz so breit.)
2. Der Header bleibt beim Scrollen stehen und
3. Der Shop wird optisch beim scrollen unter den Header geführt.
4. Siehe Anhang

Geht das?

 

Das hier sollte gehen:

Code:

body #outer-wrapper {
    background-color: transparent;
    width:            100%;
   
    @media (min-width: $screen-sm-min) {
        margin-top: 30px;
    }
   
    #header {
        background-color: $gx-wrapper-bg;
        position:         fixed;
        width:            100%;
        z-index:          9999;
       
        #topbar-container {
            background-color: #FBE5A6;
        }
       
        .inside {
            margin: 0 auto;
           
            @media (min-width: $screen-sm-min) {
                width: 750px;
            }
           
            @media (min-width: $screen-md-min) {
                width: 970px;
            }
           
            @media (min-width: $screen-lg-min) {
                width: 1270px;
            }
        }
    }
   
    #wrapper {
        background-color: $gx-wrapper-bg;
        margin-top:       157px;
    }
}

 

Und das ging auch!!. Wie ich es mir vorgestellt hatte.
Herzlichen Dank mein Herr!

Herr Ober!!! Bitte ein stück Kuchen für meinen Freund!

 

• Hallo @Torben (Gambio) , oder wer auch eine Lösung hätte!. Nach ein paar Tagen Betrieb, ist mir beim Testen des Shops ein kleiner "Mißstand" aufgefallen, den ich gerne mit eurer Hilfe beheben würde. Da der Header nun fixiert ist,(auch beim Umblättern) ergibt sich dass in einer der Folgeseiten, der Header mit dem großen "Detailbild in der Lightboxansicht" sorry,,, ich weiss nicht wie ich das sonst bennenen soll, siehe Anhang überschneidet. DasProblem ist: Wenn das Bild aufgerufen wird. wird es teilweise durch den Header überdeckt, so dass
  
• a) der Artikel nicht gut erkenbar ist,
• b) der Button zum schließen dieser Ansicht, nicht bedienbar ( da verdeckt) ist.

Meine Lösungsansätze wären, entweder den Header in dieser Ansicht nicht sichtbar oder present zu schalten, oder die Position des Bildes (Lightbox) nach unten zu verschieben, so dass sich die zwei Elemente nicht im Wege sind.
Dummerweise, habe ich für beide (oder gar dritte und weitere) Möglichkeiten, zu wenig Kenntnisse um das ohne Anleitung zu schaffen.
Könnt Ihr helfen?

 

in dem Code oben ist ein z-index von 9999,
wenn Du den auf "1000" änderst, könnte es passen.

 

Hallo @ Barbara. Vielen Dank, das hat auf Anhieb geklappt und ist nun so wie es sein sollte. Ich bin echt immer wieder erstaunt!
Vielleicht hast du auch einen Tipp für diesen Wunsch. Da der Footer bei mir auch breiter als der Shop ist, haben sich die im Footerheader befindenden Objekte etwas ungünstig verteilt. Siehe Anhang: Ist es möglich nur den Footerheader wieder auf die breite des shops darüber zu verkleinern, oder alternativ die objekte im Header so zu zentrieren, dass sie optisch innerhalb der Grenzen des Shops bleiben?