Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann

Die Foren sind geschlossen. Für Fragen zu MR, NOF & mehr steht Tommys Forum zur Verfügung. Ich danke für die langjährige Treue und Mitarbeit! Eure Administratorin.

Mobirise-Text unter Logo Menüleiste
#1
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
Alle Beiträge dieses Benutzers finden
#2
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!
Alle Beiträge dieses Benutzers finden
#3
:latein:
Zumindest hätte ich mal auf die Idee kommen können...
Trotzdem. ich habe das "wie geht es" vergessen.


.jpg  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......
Alle Beiträge dieses Benutzers finden
#4
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
Alle Beiträge dieses Benutzers finden
#5
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.
Alle Beiträge dieses Benutzers finden
#6
Hallo,
meinst du so?

.jpg  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

.jpg  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

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


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

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



2.

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


Dann sollte es passen Smiling

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
Alle Beiträge dieses Benutzers finden
#7
Ja. So hatte ich es gemeint.
Werde ich morgen auch mal versuchen.
Danke.
Alle Beiträge dieses Benutzers finden
#8
Aus welchem Theme kommt diese Navi?
Alle Beiträge dieses Benutzers finden
#9
StoreM4
Alle Beiträge dieses Benutzers finden
#10
... versuche doch einfach mal was ich Dir bereits geschrieben hatte :confused:

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.


.jpg  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).


.jpg  Sticky-Top.JPG (Größe: 90,1 KB / Downloads: 28)
Alle Beiträge dieses Benutzers finden
#11
Mach ich gleich. Versprochen..... Smiling
Alle Beiträge dieses Benutzers finden
#12
So. Ich hatte vorher schon rumgetüftelt.  :D

@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.  thumbs up
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.
Alle Beiträge dieses Benutzers finden
#13
Ja mach mal.
Dauert ja nur max.20min .
Beim nächsten Mal dann nur noch 10min :D

thumbs up
Alle Beiträge dieses Benutzers finden
#14
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):


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


So sieht es am PC aus:


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


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


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


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


.jpg  Hamburger-Offen.JPG (Größe: 38,15 KB / Downloads: 25)
Alle Beiträge dieses Benutzers finden
#15
Ha. Klasse. Geil. Das habe sogar ich geschafft.
Link Zum Forum klebt unter der Navi. So wie ich es wollte. thumbs up
Alle Beiträge dieses Benutzers finden


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Umstieg auf Mobirise 5 nof15us 67 3.946 16.12.2020, 10:53
Letzter Beitrag: Tommy Herrmann
  NOF 12 und Mobirise kombinieren Petergun 14 514 11.12.2020, 07:50
Letzter Beitrag: Petergun
  Urplötzlich erscheint beim Hochladen folgender Text Michael G 4 226 09.12.2020, 16:39
Letzter Beitrag: tino79
  Mobirise-MP3 Player einbinden. Soundcloud? Thomas Saake 11 475 08.12.2020, 17:16
Letzter Beitrag: Thomas Saake
  Mobirise-Drop Down Menü verschiedene Farben Thomas Saake 8 314 08.12.2020, 14:42
Letzter Beitrag: Thomas Saake
  Mobirise-Noch ein Problem mit Hamburger Menü auf Handy Thomas Saake 23 725 30.11.2020, 16:54
Letzter Beitrag: Thomas Saake
  Mobirise-PopUp Modal Text statt Kreuz zum schließen Thomas Saake 3 231 26.11.2020, 15:43
Letzter Beitrag: Thomas Saake
  Mobirise-Timeline Abstand verringern Thomas Saake 2 160 26.11.2020, 14:10
Letzter Beitrag: Thomas Saake
  Position Icons - Mobirise 5.2.0. Markus78 9 424 16.11.2020, 19:03
Letzter Beitrag: Tommy Herrmann
  Logo Mobil-Ansicht (Templat Store M4) wird nicht angezeigt inno 2 216 11.11.2020, 12:06
Letzter Beitrag: inno



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!