Wie definiere ich CSS fürs WP Main Menü (Navigation)?

j-automorphose

Hallo,
ich möchte für mein Main Menü in meinem WP-Theme die CSS-Werte für a:focus und a:active bestimmen. In meiner CSS Datei habe ich die Navigation mit der id "navi" bestimmt und darüber sämtliche Werte für a, a:active, a:hover und a:focus bestimmt.

Als reine HTML-Version funktioniert das auch einwandfrei. Nur sobald ich es in mein Theme integriere nicht mehr. Ich habe gesehen, dass WP das Menü nochmals in ein DIV mit class="menu" packt.

Leider kann ich ja über die Klasse nicht die Werte der darin liegenden Elemente bestimmern, wie bspw. bei einer id (#navi a:hover in meinem Fall).

Gibt es da irgendeinen Weg, das doch noch irgendwie hinzukriegen. Denn meine Werte für :hover übernimmt auch die Klasse von der übergeordneten id.

Mein CSS-Code:

Code

#navi     {padding: 0;
        list-style-type: none;
        position: relative;
        }     
             
#navi li {float: left;}                  


#navi a    {float: left;
        position: relative;
        margin: 0px 20px 0px 0px;
        font-family: Arial, sans-serif;
        font-size: 24px;
        font-weight: bold;
        text-decoration: none;
        height: 40px;
        display: block;
        text-align: center;
        line-height: 40px;
        border: none;
        color: #111111;
        text-shadow: 1px 1px 0px rgba(255,255,255,0.3);}
                    
#navi a:hover, #navi a:active, #navi a:focus    {color: #da0615;
                text-shadow: none;
                text-shadow: 1px 1px 0px rgba(255,255,255,0.5);}

Alles anzeigen

Und hier das HTML, das WP generiert:

Code

<div id="navi">
			
<div class="menu">
<ul>
<li class="page_item page-item-6"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/jung/"]http://localhost/jung/[/URL]">Home</a></li>
<li class="page_item page-item-8 current_page_item"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/jung/?page_id=8"]http://localhost/jung/?page_id=8[/URL]">News</a></li>
<li class="page_item page-item-10"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/jung/?page_id=10"]http://localhost/jung/?page_id=10[/URL]">Produkte</a></li>
<li class="page_item page-item-12"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/jung/?page_id=12"]http://localhost/jung/?page_id=12[/URL]">Service</a></li>
<li class="page_item page-item-14"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/jung/?page_id=14"]http://localhost/jung/?page_id=14[/URL]">Galerie</a></li>
<li class="page_item page-item-16"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/jung/?page_id=16"]http://localhost/jung/?page_id=16[/URL]">Über uns</a></li>
<li class="page_item page-item-18"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/jung/?page_id=18"]http://localhost/jung/?page_id=18[/URL]">Kontakt</a></li>
<li class="page_item page-item-20"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/jung/?page_id=20"]http://localhost/jung/?page_id=20[/URL]">Karriere</a></li>
<li class="page_item page-item-22"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/jung/?page_id=22"]http://localhost/jung/?page_id=22[/URL]">FAQ</a></li>
</ul>


</div>
				
</div>

Alles anzeigen

Es wäre schade, wenn man die Werte nicht übergeben könnte, vor allem, weil :hover auch noch übernommen wird.

Es wäre schön, wenn mir jemand einen Tipp oder einen Lösungsansatz nennen könnte.
Besten Dank im Voraus.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Tutrix

Zitat

Als reine HTML-Version funktioniert das auch einwandfrei. Nur sobald ich es in mein Theme integriere nicht mehr.

hast du mal nachgesehen ob bereits css für das Menü in deinem Theme definiert ist?

Zitat

Leider kann ich ja über die Klasse nicht die Werte der darin liegenden Elemente bestimmern

warum nicht?

Code

.menu a:hover

oder besser

Code

.menu ul li a:hover

selbst über .page_item kannst du formatieren, über die ID also z.B. .page_id=10 kannst jeden einzelnen Menüpunkt separat ansprechen

und über .current_page_item den aktuell aktiven

j-automorphose

Zitat von ArtofPic
hast du mal nachgesehen ob bereits css für das Menü in deinem Theme definiert ist?

warum nicht?
Code
.menu a:hover
oder besser
Code
.menu ul li a:hover
selbst über .page_item kannst du formatieren, über die ID also z.B. .page_id=10 kannst jeden einzelnen Menüpunkt separat ansprechen
und über .current_page_item den aktuell aktiven
Alles anzeigen

Hallo ArtofPic,

Danke für deine Hilfe. Leider werden auch die Anweisungen über .menu ul li und .page_id= konsequent ignoriert.

Hier mein CSS:

Code

.menu {
margin: 20px 5px 0px 5px;
padding: 0;
list-style-type: none;
} 


.menu ul li a    {
        font-family: "Cabin", sans-serif;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        width: 160px;
        height: 25px;
        display: block;
        color: #991914;
        text-shadow: 1px 1px 0px rgba(255,255,255,1);
        background: url(images/navi-normal.png) bottom no-repeat;
        line-height: 25px;
        margin-bottom: 10px;
        } 




.menu ul li a:hover, .menu ul li a:focus, .menu ul li a:active    {font-style: italic;
                                            background: url(images/navi-hover.png) bottom no-repeat;
                                            text-indent: 10px;}


/*Startseite*/
.page_id=11 a {font-size: 20px;}
                                            
.page_id=11 a:hover, .page_id=11 a:focus, .page_id=11 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Anreise*/
.page_id=16 a:hover, .page_id=16 a:focus, .page_id=16 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Wohnungen innen*/
.page_id=13 a:hover, .page_id=13 a:focus, .page_id=13 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Aussenanlage*/
.page_id=18 a:hover, .page_id=18 a:focus, .page_id=18 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*naehere Umgebung*/
.page_id=20 a:hover, .page_id=20 a:focus, .page_id=20 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Side*/
.page_id=22 a:hover, .page_id=22 a:focus, .page_id=22 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Sport und Freizeit*/
.page_id=24 a:hover, .page_id=24 a:focus, .page_id=24 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Preise*/
.page_id=26 a:hover, .page_id=26 a:focus, .page_id=26 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Belegungsplan*/
.page_id=28 a:hover, .page_id=28 a:focus, .page_id=28 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Wetter*/
.page_id=30 a:hover, .page_id=30 a:focus, .page_id=30 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Gaestebuch*/
.page_id=32 a:hover, .page_id=32 a:focus, .page_id=32 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Galerie*/
.page_id=34 a:hover, .page_id=34 a:focus, .page_id=34 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Kontakt*/
.page_id=36 a:hover, .page_id=36 a:focus, .page_id=36 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Facebook*/
.page_id=38 a:hover, .page_id=38 a:focus, .page_id=38 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}


/*Impressum*/
.page_id=40 a:hover, .page_id=40 a:focus, .page_id=40 a:active
{font-style: italic;
background: url(images/navi-hover.png) bottom no-repeat;
text-indent: 10px;}

Alles anzeigen

und der generierte Quelltext:

Code

<div class="menu">
  <ul>
     <li class="page_item page-item-11"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/"]http://localhost/side-wohnung/[/URL]">Startseite</a></li>
     <li class="page_item page-item-16"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/anreise/"]http://localhost/side-wohnung/anreise/[/URL]">Anreise</a></li>
     <li class="page_item page-item-13"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/wohnungen-innen/"]http://localhost/side-wohnung/wohnungen-innen/[/URL]">Wohnungen innen</a></li>
     <li class="page_item page-item-18"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/aussenanlage/"]http://localhost/side-wohnung/aussenanlage/[/URL]">Außenanlage</a></li>
     <li class="page_item page-item-20"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/naehere-umgebung/"]http://localhost/side-wohnung/naehere-umgebung/[/URL]">nähere Umgebung</a></li>
     <li class="page_item page-item-22"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/side/"]http://localhost/side-wohnung/side/[/URL]">Side</a></li>
     <li class="page_item page-item-24"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/sport-und-freizeitangebote/"]http://localhost/side-wohnung/sport-und-freizeitangebote/[/URL]">Sport- und Freizeitangebote</a></li>
     <li class="page_item page-item-26"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/preise/"]http://localhost/side-wohnung/preise/[/URL]">Preise</a></li>
     <li class="page_item page-item-28"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/belegungsplan/"]http://localhost/side-wohnung/belegungsplan/[/URL]">Belegungsplan</a></li>
     <li class="page_item page-item-30"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/wetter/"]http://localhost/side-wohnung/wetter/[/URL]">Wetter</a></li>
     <li class="page_item page-item-32"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/gaestebuch/"]http://localhost/side-wohnung/gaestebuch/[/URL]">Gästebuch</a></li>
     <li class="page_item page-item-34 current_page_item"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/galerie/"]http://localhost/side-wohnung/galerie/[/URL]">Galerie</a></li>
     <li class="page_item page-item-36"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/kontakt/"]http://localhost/side-wohnung/kontakt/[/URL]">Kontakt</a></li>
     <li class="page_item page-item-38"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/facebook/"]http://localhost/side-wohnung/facebook/[/URL]">Facebook</a></li>
     <li class="page_item page-item-40"><a href="[URL="http://forum.wpde.org/view-source:http://localhost/side-wohnung/impressum/"]http://localhost/side-wohnung/impressum/[/URL]">Impressum</a></li>
   </ul>
</div>

Alles anzeigen

Tutrix

nun die einzelnen Klassen siehst du ja im Listenelement

z.B.

Code

<li class="[COLOR="#FF0000"]page_item[/COLOR] [COLOR="#FF8C00"]page-item-11[/COLOR]">

alle gemeinsam also über

[COLOR="#FF0000"]page_item[/COLOR]

oder

Code

.menu ul li a

nur Item 11 also

[COLOR="#FF8C00"]page-item-11[/COLOR]

somit also

Code

.page-item-11 a:hover

ist vielleicht oben mit page_id falsch herübergekommen

und wenn ich das jetzt richtig sehe, definierst du ja alle Menüpunkte identisch

somit reicht ja

Code

.menu {
       margin: 20px 5px 0px 5px;
       padding: 0;
       list-style-type: none;
} 
.menu ul li a    {
        font-family: "Cabin", sans-serif;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        width: 160px;
        height: 25px;
        display: block;
        color: #991914;
        text-shadow: 1px 1px 0px rgba(255,255,255,1);
        background: url(images/navi-normal.png) bottom no-repeat;
        line-height: 25px;
        margin-bottom: 10px;
}
.menu ul li a:hover, .menu ul li a:focus, .menu ul li a:active {
       font-style: italic;
       background: url(images/navi-hover.png) bottom no-repeat;
       text-indent: 10px;}

Alles anzeigen

j-automorphose

Das letztere habe ich als erstes versucht, leider ohne Erfolg.

Aber auch page-item-11 ignoriert WordPress vehement.

Tutrix

Nun wenn generell keinerlei Formatierungen greifen, dann stimmt wohl allgemein etwas nicht.

falsche css Datei wird bearbeitet

oder die css ist gar nicht verlinkt(z.B. bei selbst gebastelten Theme)

es ist ein Fehler in der css, z.B. eine fehlende Klammer "}" so das der nachfolgende Code nicht ausgeführt wird

usw.

aber das siehst du ja über die Entwickler-Tools des Browsers (Element untersuchen) oder z.B. mit Firebug

da man sich das ja nicht ansehen kann, musst du selbst suchen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Wie definiere ich CSS fürs WP Main Menü (Navigation)?

Jetzt mitmachen!