Schrift in Menü verändern

Benkho

Grünschnabel
Moin moin,
ich habe da auch nochmal eine andere Frage. In Gestaltung müssen wir auch eine Webseite erstellen.
Wir haben die Onepage Webseite mit Bootstrap 4 erstellt und ein Dropdown Menü zu den Header hinzugefügt. In dem Dann verschiedene Themen stehen sollen. Setzt soll allerdings die Schrift z.B. Hallo die im Header für das Dropdown menü fest drinne steht sich ändern zu dem Thema was man auswählt. Zudem soll, wenn bei dem Scrollen die ID erreicht wird ebenfalls sich die Schrift zu dem Thema anpassen. Ich schätze mal das man es mit JavaScript macht aber ich weis noch nicht genau wie. Es soll übrigends die Schrift :Dropdown link verändern.

Hier nochmal der Code für den Header:
HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
            <a class="navbar-brand" href="index.html"> <img class="logo" src="img/ges2_logo.png" height="80"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a id="navbar1" class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          : Dropdown link
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#lorem_ipsum">Action</a>
                            <a class="dropdown-item" href="#beruehmte_personen">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                      </li>
                </ul>
            </div>
        </nav>
 
Zurück