Warum verschwinden meine Navigationsleiste und mein Hamburger-Menü auf kleineren Bildschirmen?

Verschwindende Navigationsleiste und Hamburger-Menü auf kleineren Bildschirmen beheben

Problem:

Eine Navigationsleiste mit Ein Logobild in der Mitte funktioniert auf großen Bildschirmen einwandfrei. Wenn der Bildschirm jedoch verkleinert wird, verschwindet alles, einschließlich des Logobilds und des Hamburger-Menüs. Wie kann dieses Problem gelöst werden?

Lösung:

Um die Sichtbarkeit auf kleineren Bildschirmen aufrechtzuerhalten, stellen Sie sicher, dass die Navigationsleiste entweder eine Hintergrundfarbe hat oder die entsprechenden CSS-Klassen hinzugefügt wurden:

• Für Bootstrap 5: Verwenden Sie navbar-light oder navbar-dark zusammen mit navbar-light bg-light oder navbar-dark bg-dark als Hintergrundfarbe.

<nav>

• Für Bootstrap 4.0.0 und älter: Verwenden Sie entweder „navbar-light bg-light“ oder „navbar-dark bg-dark“ oder fügen Sie über CSS eine benutzerdefinierte Hintergrundfarbe hinzu.

<nav>

#navbar-primary .navbar-nav {
  background: #ededed;
}

Alternativ können Sie den Hamburger-Schalter abdunkeln, um seine Sichtbarkeit zu verbessern.

.navbar-toggle .icon-bar {
  background-color: rgb(136, 136, 136);
}

Aktualisierte Informationen:

Für Bootstrap 5 sind die Klassen navbar-light oder navbar-dark für die Anzeige des Hamburger-Menüs unerlässlich.

Das obige ist der detaillierte Inhalt vonWarum verschwinden meine Navigationsleiste und mein Hamburger-Menü auf kleineren Bildschirmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!