hast du auch berücksichtigt, dass man auf dem Smartphone normalerweise im portait Modus surft und der Bildschirm vom iPhone 8 gerade mal ~10cm hoch und ~6cm breit ist?
Ein kleineres Menü würde die Bedienung für viele Menschen nur unnötig erschweren.
und was würdest du mir empfiehlst um diese probleme zu lösen?
als ich nicht viele erfahrung habe, ich habe gedacht oder mache wie der Link sagt oder wie habe eine Datei gebaut für Smartphone und Tablet mache eine sache ähnliche wie diese,
/* für iPhone 6/7/8 Plus 736px x 414ppx Landscape */
@media only screen and (min-width: 25.875em)
and (max-width: 46em)
and (orientation: landscape) {
#navigation, .nav.navbar-nav {height: auto; max-height: 250px; overflow-x: hidden;}
}
Ich würde lediglich die Suche und den Warenkorb rausnehmen, da beide schon im Header vorhanden sind.
Man könnte auch den “Home” Punkt auf Smartphones verstecken, weil man auf dem Handy eher zurück geht (über Hardware Button oder Swipe) als über die Navigation zurück zur Startseite zu gehen.
Das könnte man ggf mit class="d-none d-lg-block" machen, da wird alles unter large breakpoint versteckt.
Mehr Infos zur den Visibility Klassen von Bootstrap gibts hier:
nein. Wie gesagt, ich empfinde das Menü nicht als zu groß und sehe kein Problem darin, wenn das Menü den ganzen Bildschirm einnimmt.
Schließlich ist das Menü dann das einzige, was du sehen und anklicken willst.