So ändern Sie die Farbe der Navigationsleiste in Bootstrap

Verwendung von benutzerdefiniertem CSS

Sie können die Navbar-Farbe in Bootstrap ändern, indem Sie die Standardstile mit benutzerdefiniertem CSS überschreiben. Diese Methode zielt auf Navbar-Elemente ab und wendet neue Farbwerte an. Um die Hintergrundfarbe der Navbar zu ändern, verwenden Sie dieses CSS:

.navbar {
    background-color: #your-color-here;
}

Um die Textfarbe der Navbar-Links zu ändern, zielen Sie auf die .nav-link-Klasse:

.navbar .nav-link {
    color: #your-color-here;
}

body .navbar .nav-link {
    color: #your-color-here;
}

Ändern der Bootstrap SASS-Variablen

Eine andere Möglichkeit, die Navbar-Farbe anzupassen, besteht darin, die SASS-Variablen von Bootstrap zu ändern. Diese Methode erfordert Zugriff auf die Bootstrap-Quelldateien und einen SASS-Compiler. Ändern Sie die Navbar-Farben, indem Sie die Variablen in der Datei _variables.scss aktualisieren:

$navbar-light-color: #your-color-here;
$navbar-light-hover-color: #your-hover-color-here;
$navbar-light-active-color: #your-active-color-here;

Nach der Änderung der Variablen kompilieren Sie die Bootstrap-CSS-Datei erneut, um die Änderungen anzuwenden.

Verwendung von Bootstrap's integrierten Utility-Klassen

Bootstrap bietet Utility-Klassen zum Anwenden von Hintergrund- und Textfarben. Sie können diese Klassen in Ihrem HTML verwenden, um die Navbar-Farbe zu ändern, ohne benutzerdefiniertes CSS zu schreiben. Zum Beispiel:

<nav class="navbar navbar-expand-lg bg-primary navbar-dark">
    <!-- Navbar-Inhalt -->
</nav>

In diesem Beispiel setzt bg-primary die Hintergrundfarbe auf die primäre Themenfarbe, und navbar-dark passt die Textfarbe für einen besseren Kontrast auf dunklen Hintergründen an.

Sie können auch Textfarben-Utilities verwenden, um die Farbe von Navbar-Elementen zu ändern:

<a class="navbar-brand text-success" href="#">Ihre Marke</a>

Dies wendet die Erfolgsfarbe auf den Navbar-Markentext an.

.bg-custom {
    background-color: #your-custom-color;
}

.text-custom {
    color: #your-custom-text-color;
}

<nav class="navbar navbar-expand-lg bg-custom">
    <a class="navbar-brand text-custom" href="#">Ihre Marke</a>
    <!-- Anderer Navbar-Inhalt -->
</nav>

Navbar-Elemente identifizieren

Um die Farbe Ihrer Bootstrap-Navbar zu ändern, finden Sie die Hauptelemente:

1. Navbar-Container: Der Hauptwrapper für die Navbar, üblicherweise mit der Klasse navbar.
2. Markenlogo: Oft ein <a>-Tag mit der Klasse navbar-brand.
3. Navigationslinks: Typischerweise <li>- oder <a>-Elemente innerhalb eines <ul> mit der Klasse navbar-nav.

<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="#">Ihre Marke</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#">Startseite</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Über uns</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Kontakt</a></li>
  </ul>
</nav>

Benutzerdefinierte Stile anwenden

Nach dem Finden der Elemente fügen Sie benutzerdefinierte Stile hinzu:

1. CSS-Regeln schreiben:

   .navbar {
    background-color: #ihre-hintergrundfarbe;
   }
   .navbar-brand {
    color: #ihre-markenfarbe;
   }
   .navbar-nav .nav-link {
    color: #ihre-linkfarbe;
   }

2. Spezifität berücksichtigen: Um Bootstraps Standardstile zu überschreiben, müssen Sie möglicherweise Ihre Selektoren spezifischer machen:

   body .navbar {
    background-color: #ihre-hintergrundfarbe;
   }

Testen und Anpassen

Nach dem Hinzufügen Ihrer Stile:

1. Browser-Kompatibilität prüfen: Testen Sie Ihre Navbar in verschiedenen Browsern, um sicherzustellen, dass die Farben korrekt angezeigt werden.

2. Responsives Design berücksichtigen: Überprüfen Sie, ob Ihre benutzerdefinierten Farben auf verschiedenen Bildschirmgrößen gut funktionieren. Möglicherweise müssen Sie Farben für mobile Ansichten ändern:

   @media (max-width: 768px) {
    .navbar {
      background-color: #mobile-hintergrundfarbe;
    }
   }

Indem Sie diese Schritte befolgen, können Sie die Farben Ihrer Bootstrap-Navbar an das Design Ihrer Website anpassen und gleichzeitig ihre Funktionen erhalten.