Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Dropdownmenü defekt
#1
Hallo ihr Lieben!
Voller Tatendrang habe ich mich vor einigen Tagen an einen eigenen e-Learningbereich für unsere Mitarbeiter gemacht. Da ich jedoch schon länger nichts mehr mit Mobi gearbeitet hatte, habe ich diesem vorher noch ein Update spendiert. Die Zeit verging, alles war fertig und auch die restliche Webseite wurde aktualisiert. Doch nun habe ich leider bemerkt, dass die Navigation für Handy und Tablet nicht mehr richtig angeordnet wird!
Das Problem besteht gleichermaßen bei alten Backups oder neuen Projekten!


https://www.baeckerei-moshammer.at/


Dr. Google konnte mir dieses mal nicht helfen...
...hätte von euch jemand eine Idee?
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Dein Menü wirst Du so lassen müssen! Fast alle Mobi-Templates haben ein rechtsbündigen Collaps-Menü und da muss dann das Hamburger-Kreuz (X) etwas nach innen rücken.
Mir gefällt das nicht, aber nur die 2 IndustryM4-Themen haben ein linksbündiges Menü.
Ich habe mein Menü mit Media Queries umgestellt, aber das ist richtig schwer und nicht zu empfehlen:
https://www.zahnarzt-schaller-plauen.de/

Update:
Ich sehe gerade, dass bei sehr kleinem Monitor, das Menü nicht ganz zu sehen ist. Ich schaue mal, ob ich was finde.

In die entspr. Media Anweisung, wahrscheinlich @media (max-width: 991px) ,
muss
.navbar-toggler {
    position: relative;
    margin-left: -50px;oder mehr oder weniger
}
dann muss aber Dein Logo weiter nach links!

.navbar-brand {
margin-left: 2rem;
}
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Hallo, vielen Dank für die Antwort!
Das würde mich nicht stören aber beim öffnen...


Angehängte Dateien
.jpg  navi.jpg (Größe: 73,6 KB / Downloads: 22)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Probiere in der Media Queries
.navbar-collapse {
    width: 200px;
}
und für das Logo
.navbar-brand {
padding: 1.5rem 0;
}
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Wo genau finde ich die Media Queries? @media? Huh
In der CSS Spalte vom Editor gibt es ".navbar-collapse {}" und ".navbar-brand {}" öfter...

Habe sie mal in alle eingetragen die ich gefunden habe, leider kein Erfolg!  Crying
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Media Queries sind Anweisungen, die sich nur auf bestimmte Bildschirmgrößen beziehen. Dein Menü sieht ja (wirklich) gut aus. Nur ab einem Brakepoint (bei Mobirise 991px) wird das Menü zugeklappt und dann gibt es bei Dir diese Überlagerung. Die unten aufgeführten Anweisungen sollen nur für eine Bildschirmbreite bis 991px gelten:

@media (max-width: 991px) {

.navbar-toggler {
position: relative;
margin-left: -50px;
}
.navbar-brand {
margin-left: 2rem;
padding: 1.5rem 0;
}
.navbar-collapse {
width: 200px;
}
}

Diesen Code kopierst Du in deinem Menü-Block in den CSS-Editor an das untere Ende!
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
.navbar-toggler {
position: relative;
margin-left: -50px;
}
setzt den Button des kollabierten Menüs und das ganze Menü nach links.

.navbar-brand {
margin-left: 2rem;
padding: 1.5rem 0;
}
Setzt das Logo nach links und nach unten.

.navbar-collapse {
width: 200px;
}
Setzt die Breite des kollabierten Menüs auf 200px.

Man könnte noch mehr Brakepoints setzten! Das kollabierte Menü ist immer zu klein, es muss aber erst später (bei ca. 600px Bildschirm) nach links. Vorher (bei ca. 900px) gibt es ja noch kein Problem. Auch die Überlagerung mit dem Logo kommt erst bei ca. 500px kleinem Bildschirm. Das wird aber zu kompliziert.
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Brachte leider nicht den gewünschten Erfolg... siehe Bild.
Seltsamerweise verschiebt sich auch ohne Logo alles nach rechts anstatt nach unten!


Angehängte Dateien
.jpg  mit logo + css.jpg (Größe: 83,12 KB / Downloads: 17)

.jpg  ohne logo.jpg (Größe: 78,92 KB / Downloads: 16)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Es verschiebt sich nichts nach unten! Das Menü hat halt eine entspr. Höhe (100vH). Setzte mal die Breite von 200px auf 250 px!
Alternativ kannst Du auch das kollabierte Menü mittig machen! Das geht aber anders.
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Leider auch bei 250 keine Änderung.

Früher klappte das "Submenü" nach unten auf (siehe Fotomontage") und jetzt versetzt neben dem Logo...
Oder ist das in deinem Browser anders???

Lg & danke für die Hilfe!!!


Angehängte Dateien
.jpg  menü_früher.jpg (Größe: 63,29 KB / Downloads: 15)

.jpg  menü_heute.jpg (Größe: 31,31 KB / Downloads: 14)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Dein Screenshot zeigt eine andere Einstellung als auf Deiner Online-Seite
https://www.baeckerei-moshammer.at/
Jetzt ist das kollabierte Menü zentriert. Das hatte ich oben erwähnt und das ist auch eine sehr gute Variante. Wenn Du das, wie auch immer, hinbekommen hast, würde ich es so lassen!
Logo und (kollabiertes) Menü sind in einem Flex-Container zusammengefasst. Das heißt sie verschieben sich flexible bei Änderung der Platzverhältnisse. Du muss ihnen nur sagen, wie sie verrutschen sollen. Der Screenshot "früher" sieht doch gut aus. So ist es online aber nicht.
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Moment ... nicht so kompliziert denken.
Wenn Du schon länger nichts mehr am Projekt gemacht hast, hast Du jetzt ein Update Chaos.
Mobi macht sowas leider sehr oft.
Es gibt Änderungen an einem Theme und am Kernprogramm, und schon gibt es in alten Projekten ärgerliche Probleme.
Also: Menü löschen und neu einfügen.

Als Test kannst Du Dein bestehendes Menü als Userblock speichern, dann löschen, ein neues Menü einfügen, Upload, testen.
Wenn nicht klappt, einfach ein ähnliches Menü aus einem anderen Theme nutzen. Es gibt Menüs, die von Anfang an irgendwie problembeladen sind, der Programmierer scheinbar die Firma verlasen hat und die anderen nicht durchblicken. Sowas gibts....Windows besteht zu 100% daraus :D
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
@ Martin73: Ja, das ist nur dank Photoshop so... nur um zu zeigen wie es war bzw. wieder sein sollte! Trotzdem ein großes DANKE!

@ stobi_de: Wahrscheinlich ein Bug in der neuen Mobiversion?! Funktioniert auch bei neuen Projekten nicht...

Habe nun eine neue Navi gebaut. Es liegt wohl auch an den Proportionen unseres Logos, verwende nun für die Mobile-Ansicht ein kleineres Logo...

Funtkioniert ganz gut! Richtig fein wäre jedoch wenn ich den Orangenen Balken (menu-top-content) beim scrollen noch wegbekommen würde!


Angehängte Dateien
.jpg  top-content.jpg (Größe: 75,89 KB / Downloads: 13)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Die Zeile oben ist die Topline.
Ich habe mal etwas damit rumgespielt im Firefox-Debugger.
Selbst wenn man alle IDs und Klassen dazu entfernt, bleibt das Ding konstant oben.

Du hast ja selbst schon gemerkt, dass das Thema Navi bei Mobirise nicht wirklich doll ist.
Es gibt aber garantiert in den ganzen Themes eine Navi, die die gewünschten Eigenschaften hat.

Die hier stammt glaube ich aus Agency
https://www.bergisches-team.de/

oder hier das
https://hno-gummersbach.de/
(ich bilde mir ein, dass hier die Kopfzeile früher weicher verschwand)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
Die entspr. Div (Top Line) gehört zur Navigation (nav-Tag) und wird somit immer sticky sein, wenn die Navigation es ist. Man könnte sie aus der Navi herausnehmen, aber Mobi duldet keinen anderen Gott über der Navigation! Das geht nur mit Fremdnavigation.
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren




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!