Mobirise-Text unter Logo Menüleiste

[Thomas Saake]

Moin.
Ich möchte meine Menüleiste um den Punkt Forum erweitern.
Allerdings soll die PC! Ansicht links und rechts neben dem Logo nur drei Menülinks haben.
Smartphone ist außen vor.
Der Link zum Forum soll zentriert unter das Logo. Sticky.
Help.....

www.bsv-fortuna.de

[Martin73]

Wenn Du den Menüpunkt "Forum" innerhalb der Menüzeile (unter dem Logo) haben möchtst, wird alles vertikal asymmetrisch! Mache doch einen sticky Block unter das Menü mit dem Forum-Botton in der Mitte!

[Thomas Saake]

Zumindest hätte ich mal auf die Idee kommen können...
Trotzdem. ich habe das "wie geht es" vergessen.


 sticky.jpg (Größe: 8,06 KB / Downloads: 28)


Wie bekomme ich jetzt diese Buttons sticky? Sie sollen unter der Menüleiste sitzen und nicht hoch gehen.
Brett vorm Kopf......

[Tommy Herrmann]

Wieso vergessen? Hattest Du das denn schon mal irgendwo gemacht?

Das mit dem CSS "sticky" habe ich u.a. hier angewendet (klicke auf den Button "Vertikale Navi"):

http://www.mobirise-tutorials.com/Testse...estseite3/

... vielleicht hilft das ja schon. Meine CSS class="mysticky-top" habe ich unter dieses Beispiel geschrieben und auch beschrieben, dass ich diese dann dem äußeren <section> Tag hinzugefügt habe.


In den meisten Fällen geht das auch mit der Bootstrap class="sticky-top":

http://www.mobirise-tutorials.com/Portfo...Modal.html

https://getbootstrap.com/docs/4.0/utilit...sticky-top

oder auch hier bei meiner selbst erstellten "Mega-Navi", die dann beim Scrollen oben kleben bleibt:

http://www.mobirise-tutorials.com/Testse...-Tief.html

[Thomas Saake]

Ich meine mich erinnern zu können das schon mal versucht zu haben. Aber wohl ohne Erfolg.
Ich kämpfe mich durch deine Vorschläge.
Danke.

[AndyNeu]

Hallo,
meinst du so?

 Nav_For1.JPG (Größe: 66,5 KB / Downloads: 50)


Wenn ja dann hier mein vorgehen.

Den brand-Container in das div menu-top direkt hinter dein a-Tag  BSV FortunaDortmund 58 e.V. verschieben. Siehe Bild

 Nav-for3_Logo.JPG (Größe: 62,23 KB / Downloads: 24)


Dann legst du einen neuen Div container an zwischen left-menu und right-menu mit deinem nav-item "Forum"
Siehe Bild

 Nav-for2.JPG (Größe: 79,99 KB / Downloads: 28)


Dann must du noch ein bisschen CSS ergänzen
1.

 Nav-for_CSS2.jpg (Größe: 12 KB / Downloads: 18)



2.

 Nav-For_CSS1.JPG (Größe: 12,68 KB / Downloads: 19)


Dann sollte es passen

Es ist nur für den Desktop. Es ist nicht optimiert für alle Geräte zumindest nicht durchgetestet. Das müsstest du dann selbst noch machen und bei Bedarf Anpassungen vornehmen

[Thomas Saake]

Ja. So hatte ich es gemeint.
Werde ich morgen auch mal versuchen.
Danke.

[AndyNeu]

Aus welchem Theme kommt diese Navi?

[Thomas Saake]

StoreM4

[Tommy Herrmann]

... versuche doch einfach mal was ich Dir bereits geschrieben hatte

Bootstrap hat bereits eine:

class="sticky-top"

Du ziehst Dir unter Deiner Navi einfach irgendeinen ganz einfachen Textblock auf und gibst dem <section> Tag diese Class und fertig.

Um den Abstand (Höhe) dieses Textblocks kontrollieren zu können (da dieser ja auch hinter der Navi liegt), habe ich noch selbst eine:

class="abstand-oben"

erstellt:

Code:

.abstand-oben {
  margin-top: 1.5rem;
}

Diese Class passt Du im Abstand so an, wie Du sie haben möchtest. Dann kannst Du in dieses Textfeld packen was Du willst. Du musst aber lokal publizieren um es richtig zu sehen.

Ich habe im Screenshot diese Änderungen markiert.


 sticky-code.JPG (Größe: 159,8 KB / Downloads: 25)


So sieht das dann (unverändertes Textfeld) aus. Beim runterscrollen bleibt das immer unter der Navi "kleben" (natürlcih auch am mobilen Gerät).


 Sticky-Top.JPG (Größe: 90,1 KB / Downloads: 28)

[Thomas Saake]

Mach ich gleich. Versprochen.....

[Thomas Saake]

So. Ich hatte vorher schon rumgetüftelt. 

@Tommy
Ich habe alles was du mir geschrieben hast ausprobiert.
Und zwar mit einem Block in dem nur zwei Buttons sind.
Das hat nicht geklappt. Der Block mit den Buttons ist immer oben raus.
Dann habe ich es mit einem Textblock versucht wie du geschrieben hast.
Und siehe da, es funktioniert. Dabei habe ich festgestellt dass ich das sticky-top
immer an der falschen Stelle eingefügt habe. Also: Der Textblock funktioniert. 
Ich habe es dann auch mit den Buttons weiter versucht. Ich bekomme es nicht hin.
Vielleicht geht das gar nicht. Vielleicht habe ich was falsch gemacht. Was am wahrscheinlichsten ist.

@Andy
Deine Version muss ich noch probieren.

[AndyNeu]

Ja mach mal.
Dauert ja nur max.20min .
Beim nächsten Mal dann nur noch 10min

[Tommy Herrmann]

Moin,

habe für Dich mal noch eine (eigentlich die einfachste) Lösung ausprobiert.

Ich habe einfach das obere <div> kopiert, indem Bereich wo bei Dir ganz oben:

"BSV Fortuna Dortmund 58 e.V."

... steht, und diese Kopie dann unten vor dem schließenden </nav> Tag wieder eingefügt und dem Text einen Link verpasst. Dauer 1 Minute. Fertig.

Code:

<div mbr-text class="menu-top card-wrapper mbr-fonts-style mbr-white" mbr-theme-style="display-7" mbr-if="showTop" data-app-selector=".menu-top">
    <a style="text-decoration: underline;" href="#" class="text-white">zum Forum</a>
</div>

Die Farbe und den Stil kannst Du ja auch total einfach anpassen (ich habe das jetzt alles so wie auch oben gelassen).

So sieht das im "Code Editor" aus (markiert):


 Code.JPG (Größe: 144,92 KB / Downloads: 25)


So sieht es am PC aus:


 PC-Ansicht.JPG (Größe: 75,41 KB / Downloads: 22)


So sieht es am kleinen Display mit "Hamburger" aus:


 Hamburger.JPG (Größe: 37,06 KB / Downloads: 29)


So sieht es am kleinen Display mit geöffnetem "Hamburger-Menu" aus:


 Hamburger-Offen.JPG (Größe: 38,15 KB / Downloads: 25)

[Thomas Saake]

Ha. Klasse. Geil. Das habe sogar ich geschafft.
Link Zum Forum klebt unter der Navi. So wie ich es wollte.