Aktuelle Seite hervorheben - Eigenes Menü

Hallo,

ich habe auf meiner aktuellen Seite ein eigenes Menü im Header gebastelt. Soweit ist damit alles wunderbar und ich möchte gerne eine kleine "Navigations-Hilfe" für den Besucher mit einbauen. Befindet sich dieser auf einer im Menü ausgewählten Seite so soll das "li-Element" dieser Seite mit der "background-color: #xxxxxx" versehen werden. (#xxxxx steht für den Farbcode des "Hover-Effektes" - Wird für jedes "li-Element" ein andere Farbe sein).

So hier erstmal die Seite: "http://minestarm.lima-city.de/"

Ich selbst habe schon mal mit "current-page" usw. herumprobiert nur das funktioniert denke ich mal nur bei einem "Theme-Menü" meins habe ich per HTML selbst in der header.php gebastelt.

Als Anmerkung nebenbei wir haben auch eine mobile Version manche Elemente wie die Suche sind zwei mal in der header.php und werden dann über css mit display:none einmal "deaktiviert"

Navigation in der header.php:

<nav id="navi">
                <ul>
                    <li id = "start">
                        <a href="http://minestarm.lima-city.de/">Start</a>
                    </li>
                    <li id = "blog">
                        <a href="#blog">Blog</a>
                    </li>
                    <li id = "trainer">
                        <a href="#trainer">Trainer</a>
                    </li>
                    <li id = "verein">
                        <a href="#verein">Verein</a>
                        <ul>
                            <li><a href="#">Taekwondo?</a></li>
                            <li><a href="#">Geschichte</a></li>
                            <li><a href="#">Erfolge</a></li>
                            <li><a href="#">Downloads</a></li>
                        </ul>
                    </li>
                    <li id = "bilder">
                        <a href="#bilder">Bilder</a>
                    </li>
                    <li id = "kontakt">
                        <a href="#kontakt">Kontakt</a>
                    </li>
                    <li id = "faq">
                        <a href="#faq">FAQ</a>
                    </li>
                </ul>
            </nav>

menubase.css für die mobile-Version und menueup.css für die Desktop-Version wird in die style.css importiert
Erstmal wäre es mir wichtig wenn das für die Desktop-Version klappen würde...
#navi für das Menü menueup.css:

#navi {
    display: block;
    margin-top: 10px;
}




#navi ul{
    border: none;
}




#navi ul li {




    float: left;
    border-right: 1px solid #dfdfdf;
    border-bottom: 0;
    width: 14.18%;
}
}
#navi ul li a {




    -webkit-transition: background 0.3s ease-out;
    -moz-transition: background 0.3 ease-out;
    -o-transition: background 0.3 ease-out;
    transition: background 0.3s ease-out;
}




#navi ul li#start:hover a, #navi ul li#start:hover > ul li a {
    background-color: #FF2C2C;
}
#navi ul li#blog:hover a, #navi ul li#blog:hover > ul li a {
    background-color: #008DF5;
}
#navi ul li#trainer:hover a, #navi ul li#trainer:hover > ul li a {
    background-color: #01B304;
}
#navi ul li#verein:hover a, #navi ul li#verein:hover > ul li a {
    background-color: #FFCB05;
}
#navi ul li#bilder:hover a, #navi ul li#bilder:hover> ul li a {
    background-color: #8F6B0E;
}
#navi ul li#kontakt:hover a, #navi ul li#kontakt:hover > ul li a {
    background-color: lightgray;
}
#navi ul li#faq:hover a, #navi ul li#faq:hover> ul li a {
    background-color: black;
}
#navi ul li:hover > a {
    color: #FAFAFA;
}
#navi ul li:hover > ul {
    visibility: visible;
}




#navi ul li ul {
    display: inline;
    visibility: hidden;
    position: absolute;
    padding: 0px;
    max-height: none;
    overflow: visible; 
    width: auto;
}
#navi ul li:target > ul {
    max-height: none;
}

Bisher habe ich nur der "Start" einen Link zugewiesen da die anderen Seiten erst noch erstellt werden (sollen alle über Wordpress erstellt werden) ich denke aber das sollte kein Problem sein.

Nun was muss ich an Code in der header.php ändern damit erkannt werden kann welche Seite aktuell aufgerufen wurde?

Wäre über jede Hilfe sehr dankbar. Fehlt noch irgendwas kann ich das natürlich gerne nachreichen...

MfG minestarm

Zitat von pixselig

Hallo minestarm

Ich würde dir raten, doch die WP-eigene Menüfunktion zu nutzen. Das ist sicher die sauberste Lösung.

Erstmal Danke für deine schnelle Antwort
Das ist genau das was ich nicht wollte, ok jetzt wäre das leichter daran haben wir nicht gedacht aber mit HTML kenn ich mich deutlich besser aus, letzendlich ist es nur eine feste Webseite die sich kaum ändert und ein Blog enthält mit einfachem Interface, so mache ich mir das Menü genau wie ich es will.

Zitat von pixselig

Da dein Theme aber anscheinend body-class unterstützt https://codex.wordpress.org/Function_Reference/body_class könntest du eventuell das ganze mittels dieser im stylesheet regeln. Also zum Beispiel:

Code

.page-id-145 #nav ul li {backgorundcolor: red;}

LG, pixselig

Hab gerade eine Seite ("http://minestarm.lima-city.de/?page_id=30") an der ich gerade rumbastel ... soll dann später die Startseite werden

Hab gerade mal folgendes ins CSS gepackt:

.page-id-30 #start {backgorund-color: red;}

hab ja jedem "li-Element" eine ID gegeben deswegen #start und die Seite hat ja die ID "30" demnach die 145 auf 30 geändert funktioniert aber leider nicht...

EDIT:
Ach immer diese Tippfehler funktioniert doch, danke ;) Aber der Tippfehler kommt von dir :D...

EDIT#2:
Ok scheint wunderbar zu funktionieren, falls nochmal eine Frage diesbezüglich aufkommt melde ich mich hier drunter