Twenty Eleven: Header fixieren

Ottmar

Moin!

Ich würde gerne den Seitenkopf (branding, Suchfeld und Navigation) fixieren, damit der user immer Zugriff darauf hat.

Ich habe schon fleissig mit den Styles herumprobiert, war aber leider nicht erfolgreich.

Kann mir jemand helfen?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Axel2301

Ich habe die gleiche Frage, ich möchte auch im Theme Twenty Eleven den Header samt Navigationsleiste fixieren. Beim Scrollen soll die Seite in den Header rutschen. Beim folgenden Versuch ist aber der komplette Header samt Navi völlig verzerrt an den rechten Browserrand gewandert:

/* =Header
----------------------------------------------- */

#branding {
/*border-top: 2px solid #bbb;*/
padding-bottom: 10px;
position: fixed;
z-index: 9999;

Was kann ich tun? Bitte um Hilfe.

SirEctor

Kannst Du uns auch noch einen Link geben um das Live zu sehen?

Axel2301

Das soll aussehen wie auf dieser Seite http://www.arn-ltd.com/

SirEctor

Wir müssen wissen wie es jetzt aussieht. Also brauchen wir einen Link zu Deiner Seite.

Axel2301

Ach so, hier der Link http://www.deutsch-griechischer-tierschutzverein.de

Danke euch!

SirEctor

!Vorher die CSS lokal sicher, dann ...

ändere mal in Deiner css

Code

#branding {
padding-bottom: 10px;
[COLOR=#ff0000]position: fixed;[/COLOR]
z-index: 9999;
[COLOR=#ff0000]width: 1000px;[/COLOR]
}

Code

#page {
[COLOR=#ff0000]margin: 0em auto;[/COLOR]
[COLOR=#ff0000]margin-top: 0px;[/COLOR]
max-width: 1000px;
background: #DDD;
[COLOR=#ff0000]padding: 0 12px;[/COLOR]
[COLOR=#0000ff]-webkit-box-shadow: 5px 0px 5px #333;
-moz-box-shadow: 5px 0px 5px #333333;
box-shadow: -5px 0px 10px #333, 5px 0px 10px #333;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;[/COLOR]
}

Alles anzeigen

das [COLOR=#0000ff]blaue [/COLOR]löschen!

Axel2301

Aber wenn ich das blaue lösche, ist doch der Schatten weg, oder?

SirEctor

Dann lösch nur
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;

Axel2301

Ups ich sehe grade das ich den falschen Link geschickt habe, sorry!!!

Es handelt sich um diese Seite http://www.roller-tour.de/wordpress

Ich habe aber dort bis auf den Schatten löschen die von dir vorgeschlagenen Änderungen vorgenommen, jedoch verschwindet nun ein Teil des oberen Seiteninhalt hinter dem Header!?

Ich mache das nochmal rückgängig damit du den ursprünglichen Zustand sehen kannst.

SirEctor

gib dem #branding noch ein top: 0; und das passt Du noch an:

Code

#main {
clear: both;
[COLOR=#ff0000]padding: 275px 0 0;[/COLOR]
}

Axel2301

Wenn ich es mir nochmal überlege, würde es völlig ausreichen wenn ausschließlich die Navigation beim Hochscrollen am oberen Browserrand bleibt damit diese immer sichtbar ist. Ist das einfacher umzusetzen?

SirEctor

nein, ist es nicht.

Axel2301

Und wie würde das gehen?

SirEctor

Wenn die Navi fixed ganz oben stehen soll, muss sie von Anfang an ganz oben sein.

schreib mal bei #access zusätzlich
position: fixed;
top: 0;
width: 1000px;

Axel2301

Ok aber das ist nich das was ich meine. Die Navileiste soll erst mit nach oben wandern und dann bei weiterscrollen am oberen Browserrand kleben bleiben. Das wäre wirklich optimal. Hoffe ich gehe euch nicht zu sehr auf die Nerven...

SirEctor

Wüsste nicht, das sowas über css geht.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Twenty Eleven: Header fixieren

Jetzt mitmachen!