Bootstrap: Den Button in der Navigationsleiste anpassen.

Ich wollte in einem Bootstrap Template den Button für die mobile Navigationszeile von den drei waagerechten Strichen gegen einen Text austauschen. Durch folgende einfache Änderungen kann man das erreichen.

Zuerst den Button ändern:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">Navigation </a>

Dann noch in einer lokalen CSS Datei die Defaults von Bootstrap mit den eigenen Farben überschreiben.

.btn-navbar {
    background-color: #fff;
    background-image: none;
}

.btn-navbar:hover, .btn-navbar:active, .btn-navbar.active, .btn-navbar.disabled, .btn-navbar[disabled] {
    background-color: #fff;
}

Fertig