BItte um einen Menütest

[stobi_de]

www.lifeline-hold.com
Hier haben wir ein Menü gemacht mit Navik.
Da ich an diesem Projekt nun mit einer weiteren Person arbeite, muss Navik weichen. Zu kompliziert ist die Erweiterung des Menüs - unnötig kompliziert.

Ich habe nun mit Bordmitteln und etwas Javascript dieses gebaut. Bevor ich das dem Kunden vorstelle, könnte sich mal jmd. durchklicken, auch auf Handy? (Habe ja kein Apple)
Sieht ein bissl anders aus, aber nicht unbedingt schlechter.
https://www.afripix.de/hold/index.php

[Tommy Herrmann]

Moin,

gucke Dir mal das Video zur Navi am Handy an.

Da stimmt noch etwas nicht.

Zu Beginn verschwindet das Logo in der Menüleiste - eben auch am Handy - und dann gibt es nur den Hamburger-Button; erst beim Scrollen erscheint es wieder. Ist dieses Verhalten beabsichtigt?

Das Video wurde wieder gelöscht ...

[Tommy Herrmann]

Ich habe das eben wiederholt und ich habe versehentlich auf den Button Beenden des Screen-Recorders geklickt.

Die Navi funktioniert also in beiden Fällen, mit oder ohne Logo.

Warum das Logo zunächst weg ist, weiß ich nicht. Ich denke aber das ist nicht so gewollt.

[stobi_de]

Du bist schnell, danke!

Hm, also ich habe den Effekt am Google Pixel 8 nicht.
Vielleicht hast Du es gerade erwischt, als ich hochgeladen habe?

Das Logo soll am anfang nicht sichtbar sein, weil es ja schon riesig auf der rechten Seite ist.
Die Navi wird nach oben geschoben und dann bei Pos 100 wieder eingeschoben von oben - mit Logo.

Aber ich sehe immer die Menüpunkte.
Welchen Browser nutzt Du da?

[Tommy Herrmann]

Ich habe hier mein "Samsung Galaxy S24", ich habe am Samsung-Browser (Standard), am Edge und Chrome genau das gleiche Verhalten.

Das ist aber auch OK - nur persönlich würde ich das Logo in der Navi nicht mit dem im Header gleich setzen oder irgendwie vergleichen. Am Desktop ist das auch OK, nur am Handy sieht es irgendwie falsch aus (finde ich).

Ich finde es sieht am Handy komisch aus, wenn es erst fehlt und dann plötzlich da ist

[Tommy Herrmann]

Noch etwas fällt mir auf. Der "Scroll to top" Button sitzt am Handy nicht wirklich mittig, sieht aus als hättest Du ein Overflow mit "hidden" versteckt


Stunden später

... hast Du:

Code: Alles auswählen

.collapsed .dropdown .dropdown-menu {
  width: 100%;
  text-align: center;
  position: relative;
  opacity: 0;
  overflow: hidden;
  display: block;
  height: 0;
  visibility: hidden;
  padding: 0;
  transition-duration: .5s;
  transition-property: opacity, padding, height;
}

[stobi_de]

AN der Stelle stammt das Overflow aber nicht von mir.
Auch die Mobis programmieren wohl nicht immer sauber

[Tommy Herrmann]

Moin,

musst Du mal suchen - es gibt ja mehrere unterdrückte Überläufe `overflow: hidden`:

Code: Alles auswählen

figure {
  overflow: hidden;
}

Code: Alles auswählen

.goog-te-gadget {
  height: 28px !important;
  overflow: hidden;
}

Auf jeden Fall gibt es ja einen Overflow, was man an diesem Button "Scroll to top" erkennen kann, der nicht mittig sitzt.

Ich habe irgendwie dieses Übersetzungs-Tool vom Rudy im Verdacht, konnte aber gerade nicht erkennen was das verursacht.

[stobi_de]

Nee, das mit dem Scroll-Up ist sehr sonderbar in dem Theme Mobi4
Ich habe das schon, damit es nicht zu sehr auffällt, auf 45% gesetzt.
Aber der Button sitzt in einem DIV, welches standardmäßig bei 50% anfängt. Dh. die Breite des Pfeil-Buttons kommt immer noch zu den 50% hinzu. Der Linke Rand dieses Buttons ist genau in der Mitte. Bei mir jetzt halt nicht mehr wegen den 45% Abstand vom linken Bildschirmrand