we_universal Sticky Mobile Navbar

[borussemd]

Hi allerseits,

kann mir jemand auf die Sprünge helfen?
Wie kann ich das kleine Menüband oberhalb des Banners in der mobilen Ansicht am oberen Bildschirmrand beim Scrollen fixieren?
Meine Seite: mi-forum.net auf Basis von 3.1.8 und we_universal Theme.

Ausführlich:
Im mobilen Browser hab ich auf meiner Seite oberhalb des Logobanners ein Menü in dem eine Glocke (Benachrichtigungen), ein Briefumschlag (PN´s), mein Profil und ein Button für das Dropdownmenü vorhanden sind. Jetzt möchte ich lediglich diesen Bereich zur sticky Navbar machen. Im Style Template Ordner ist eine navbar_responsive_header. Ich denke mal, meine Änderungen beziehen sich auf diese Datei?! Allerdings brauche ich hilfe bei der Umsetzung.

[Joyce&Luna]

Es ist ein schöner Style, aber an dem würde ich persönlich nicht herum basteln wollen.
Er hat Dinge drin die nicht ich so im Standard vorhanden sind.
Vielleicht solltest du dich an Arty selber wenden.
Oder hier ist einer der dir gerne dabei hilft.

https://www.phpbb.com/community/viewtop ... &t=2315976

Anke

[Lehrling]

probier mal das aus:
öffne das responsive.css und finde folgende Stelle

Code: Alles auswählen

.inventea-userbar {
	height: 47px;
	padding-top: 14px;
}

Füge an der Stelle folgendes ein:

Code: Alles auswählen

position: fixed;
	right:0;
	top: 0;
	width: 100%;
   z-index: 100;

[borussemd]

Das klappt für das Menü perfekt.
Jetzt musst du mir nur noch sagen, wie das Dashboard nicht hinter dem Menü, sondern unterhalb des Menüs angesetzt wird...
Meine Ideen mit dem Wrapper oder dem position Tag klappten nicht.

[Lehrling]

füge dafür in das responsive.css folgenden Code ein:

Code: Alles auswählen

.inventea-header {
	margin-top: 43px;
}

Am sinnvollsten nach

Code: Alles auswählen

.inventea-wrapper {
	padding: 15px 10px 6px;
}

[borussemd]

Perfekt, du hast mir sehr geholfen! Vielen Dank!!!

[borussemd]

Da die Sticky Navbar generell in meinem Forum sehr gut läuft, hätte ich noch ein paar Optimierungsfragen, wenn möglich...

Ist es mit css realisierbar, dass sich das Menü nach oben verschiebt, sobald ich scrolle? Derzeit hat das Menü aufgrund des Designs einen Abstand nach oben von 14px. Diese 14px sollten beim Scrollen auf 0 gehen.

Der popup.alert Dialog, welcher Aufpopt wenn ich zb alle Benachrichtigungen als gelesen markiere lässt sich nicht via z-index vor das Menü legen, er setzt hinter dem Menü an. Kann man das ändern?

Letzte Frage die mir zur Sticky Navbar einfällt...Wenn ich zum ersten ungelesenen Post eines Threads springe, sitzt der Autor hinter dem Sticky Menü. Es müsste aber 57px tiefer ansetzen. Der Bereich, der gesamt unter dem Sticky Menü ansetzen sollte, wäre die dic class inner.

Edit
Mir fällt gerade ein, um das gesamte Board wieder so auszurichten, als wäre das Menü nicht sticky, könnte man nicht irgendwie hinter das Menü einen div legen, leer, der die Größe des Menüs hat???nur halt ohne z-index?

[borussemd]

So...das mit dem Menü hab ich nun selbst lösen können...Wäre noch die Frage mit dem alert Dialog und dem Springen zum ersten ungelesenen Post offen.

[Talk19zehn]

Hallöchen, instinktiv und ungetestet würde ich z-index nicht auf 100 sondern testweise so ca. auf 10 setzen. phpbb_alert ist ja bereits in prosilver definiert: 50(!) Evtl. hilft euch das weiter.

Des Weiteren -im Verlauf- sodann in der responsive.css --> @media only screen and (max-width: 550px), only screen and (max-device-width: 550px) { suchen
.post .postprofile { und darin mit dem Wert --> padding "spielen", es erhöhen. Ist aber nur salopp verdachtsweise geraten.

Wie ich sehe, warst du ja fleißig und hast den Autor / die Autoren bereits gefragt. Das finde ich gut. Denn ich kann nicht gewährleisten, ob die Änderungen im Verlauf deiner Änderungen mit weiteren Konsequenzen einhergehen (print.css und und und...), da in allen Konsequenzen (auch Browsern) ungetestet meinerseits.

Es käme also auf einen weiteren Versuch an. Ggf. dienen dir all jene Hinweise hier im Thema im Verlauf weiterführenden Tests und deiner dortigen Supportanfrage, wenn du die Änderungen sodann dort offenlegst.

Grüße

[borussemd]

Hey,

der Tipp mit dem z-index war enorm hilfreich. Das ich da nicht selbst drauf gekommen bin *facepalm*

Mit dem .post.postprofile hingegen wird das so nix. Zum einen brauche ich den Versatz nicht nur Mobil und zum anderen hat der padding nur Auswirkungen auf den im div liegenden Inhalt. Das Margin kam zwar schon näher, hat aber generell den Abstand zum vorangegangenen Post vergrößert. Ich müsste herausfinden wo wo die Sprungmarke gesetzt ist...Irgendwo muss ja ein Eventhandler liegen der soviel sagt wie "wenn ich auf ne Benachrichtigung klicke, springe an die und die Position." Dem Ganzen müsste nur ein Versatz mitgegeben werden. Aber da such ich mich durmelich
Naja. Aber ansonsten habt ihr mir hier schon ordentlich weiter geholfen, was leider bei phpbb.com nicht so gut funktioniert. Da ist meine Frage seit Tagen unbeantwortet