[gelöst] Bootstrap nav snippet. Kann die Schrift nicht anpassen

Emess · 24. Mai 2023

Habe hier ein Navbar snippet von Bootstrap. Habe die Hintergrundfarbe ändern können aber die Schrift lässt sich nicht ändern. Also jedenfalls nicht von mir.

Doch das Menue hätte ich gerne in einer Farbe die von dem Gelb abhebt.

Weiß sieht hier nicht gut aus!

Das HTML

Code

<body id="start">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top navbar-toggle">
        <a class="navbar-brand" href="#"><img src="img/Tiramisu-logo_pink.png" alt="Logo" class="img-fluid"></a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button> 

        <div class="collapse navbar-collapse" id="nav-main">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#about">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#portfolio">Über Uns</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#contact">Kontakt</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#impressum">Impressum</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#datenschutz">Datenschutz</a>
                </li>
                  </ul>
        </div>

    </nav>

Alles anzeigen

Und hier das CSS

CSS

/* Navigation */

.navbar {
    background-color: #FEBE00 !important;
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: solid 2px #E87E04;
    text-align: center;
    transition: all 0.3s;
}

.navbar a {
    color: #a4a4a4;
    margin: 0 16px;
    text-align: center;
}


.navbar .nav li a {
    margin: 0 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar li a:hover {
    outline: 0;
    color: #6E6F6F;
    background-color: transparent;
}

.navbar-brand {
    color: #fff;
    font-size: 2em;

}
.gran {
    color:yellow;
}

.dropdown-menu {
    background-color: #000;

}

a.dropdown-item {
    margin-left: 0px;
    padding-left: 2px;
}

.logo img {
    max-height: 40px;
}
/**  Shrinking Bootstrap Navbar **/

.shrink .navbar-brand {
    color: #fff;
    font-size: 2em;
}

.navbar.shrink {
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.shrink a {}

.shrink .brand-icon {
    width: 40px;
    margin-right: 10px;
}

@media (max-width:767px) {
    .navbar-brand {
        font-size: 1.4em;

    }
    .shrink .navbar-brand {
        font-size: 1.2em !important;
    }

    .navbar.shrink {
        padding-top: 10px;
        padding-bottom: 10px;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }

    .shrink a {}

    .shrink .brand-icon {
        width: 40px;
        margin-right: 10px;
    }
}



/** Ende Shrinking Bootstrap Navbar **/

Alles anzeigen

Aussehen tut es so

nav.jpeg

Ich hoffe es kennt sich jemand aus. Für weitere Infos einfach kurz melden

Grüße aus dem Odenwald

Sempervivum · 25. Mai 2023

Das dürfte "color" in diesem CSS sein:

Code

.navbar a {
    color: #a4a4a4;
    margin: 0 16px;
    text-align: center;
}

Dort kannst Du die Farbe deiner Wahl einsetzen.

Emess · 25. Mai 2023

Das geht leider nicht.

Ich hab die Seite mal auf einer subdomain komplett hochgeladen. Ist ein Projekt für einen Freund.

Hoffe so könnt ihr euch ein besseres Bild machen.

https://www.emess62.de/my/

Das ist Bootstrap 4.1.1

Sempervivum · 25. Mai 2023

Ein Link ist immer am besten.

Das CSS, das ich im Verdacht hatte, wird durch eines überschrieben, das höher spezifisch ist:

Code

.navbar-dark .navbar-nav .nav-link {
    color: rgba(0,0,0,.8);
}

Wenn Du das so änderst wie oben, müsste es besser aussehen.

Emess · 25. Mai 2023

Zitat von Sempervivum
Ein Link ist immer am besten.
Das CSS, das ich im Verdacht hatte, wird durch eines überschrieben, das höher spezifisch ist:
Code
.navbar-dark .navbar-nav .nav-link {
    color: rgba(0,0,0,.8);
}
Wenn Du das so änderst wie oben, müsste es besser aussehen.

Möchtest du mir das näher erklrären?.

Wenn ich selbst was code benutze ich #htmlfarben

Sempervivum · 25. Mai 2023

Gern. Du brauchst nur das CSS, das ich gepostet habe, unter den Code setzen, wo Bootstrap eingebunden wird:

Code

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .navbar-dark .navbar-nav .nav-link {
            color: rgba(0,0,0,.8);
        }
    <style>

Emess · 25. Mai 2023

Werde mir das für heute Abend vornehmen und testen.

Vorerst sehr vielen Dank

Emess · 25. Mai 2023

Ja das hat geklappt doch wo macht mir da die Hirachie probleme wenn ich den text hovern will?

Ich hatte diesen Eintrag im Verdacht

Code

.navbar li a:hover {
    outline: 0;
    color: #350c0c;
    background-color: transparent;
}

Doch auch hier lässt sich nichts ändern

Sempervivum · 26. Mai 2023

Auch das sollte funktionieren, wenn Du den selben Selektor wie Bootstrap verwendest:

Code

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .navbar-dark .navbar-nav .nav-link {
            color: rgba(0,0,0,.8);
        }
        .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
            color: #350c0c;
        }
    <style>

Emess · 27. Mai 2023

Das hat geholfen.

Habe mir gestern noch einige Bootstrap Tuts angeschaut. Es ist wohl für mich besser wenn nach einem solchen Tut selbst code, als einfach einen Schnippel zu kopieren, dessen Hierarchie man nicht unbedingt versteht.

Vielen Dank.

Sempervivum · 27. Mai 2023

Die Sache mit der Hierarchie ist hier auch sehr gut erklärt:

CSS/Tutorials/Einstieg/Kaskade – SELFHTML-Wiki

Und um einen Einblick in das CSS zu bekommen, ist der HTML-Inspektor in den Entwicklerwerkzeugen deines Browser sehr nützlich: Rechtsklick auf ein Element und dann "(Element) untersuchen". Kann sich je nach Browser ein wenig unterscheiden.

[gelöst] Bootstrap nav snippet. Kann die Schrift nicht anpassen

Emess 27. Mai 2023

Jetzt mitmachen!

Teilen