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?
Twenty Eleven: Header fixieren
-
-
- Gerade eben
- Anzeige
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)
-
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.
-
Kannst Du uns auch noch einen Link geben um das Live zu sehen?
-
Das soll aussehen wie auf dieser Seite http://www.arn-ltd.com/
-
Wir müssen wissen wie es jetzt aussieht. Also brauchen wir einen Link zu Deiner Seite.
-
Ach so, hier der Link http://www.deutsch-griechischer-tierschutzverein.de
Danke euch!
-
!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
Alles anzeigen#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] }
das [COLOR=#0000ff]blaue [/COLOR]löschen! -
Aber wenn ich das blaue lösche, ist doch der Schatten weg, oder?
-
Dann lösch nur
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px; -
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.
-
-
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?
-
nein, ist es nicht.
-
Und wie würde das gehen?
-
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; -
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...
-
Wüsste nicht, das sowas über css geht.
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!