Antworten zum Thema „Wie definiere ich CSS fürs WP Main Menü (Navigation)?“

dn3d_fanboy · 29.12.2013

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);}

Und das HTML, das WP generiert:

Code:

<div id="navi">            
    <div class="menu"> 
       <ul> 
          <li class="page_item page-item-6"><a href="">Home</a></li> 
          <li class="page_item page-item-8 current_page_item"><a href="">News</a></li> 
          <li class="page_item page-item-10"><a href="">Produkte</a></li> 
          <li class="page_item page-item-12"><a href="">Service</a></li> 
          <li class="page_item page-item-14"><a href="">Galerie</a></li> 
          <li class="page_item page-item-16"><a href="">Über uns</a></li> 
          <li class="page_item page-item-18"><a href="">Kontakt</a></li> 
          <li class="page_item page-item-20"><a href="">Karriere</a></li> 
          <li class="page_item page-item-22"><a href="">FAQ</a></li> 
       </ul>  
    </div>                 
 </div>

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.

Jormungand · 30.12.2013

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

Öh, vielleicht habe ich dein Anliegen nicht ganz verstanden.
Was genau spricht hiergegen?

Code:

#navi .menu ul li a {...}
#navi .menu ul li a:hover {...}

Vielleicht kannst du mit Firebug ausfindig machen, welche CSS Regel diese Links beeinflusst und die dann einfach ändern.

dn3d_fanboy · 03.01.2014

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

Hallo,

Danke für eure 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;}

Und der generierte Quelltext:

Code:

<div class="menu"><ul><li class="page_item page-item-11"><a href="">Startseite</a></li><li class="page_item page-item-16"><a href="">Anreise</a></li><li class="page_item page-item-13"><a href="">Wohnungen innen</a></li><li class="page_item page-item-18"><a href="">Außenanlage</a></li><li class="page_item page-item-20"><a href="">nähere Umgebung</a></li><li class="page_item page-item-22"><a href="">Side</a></li><li class="page_item page-item-24"><a href="">Sport- und Freizeitangebote</a></li><li class="page_item page-item-26"><a href="">Preise</a></li><li class="page_item page-item-28"><a href="">Belegungsplan</a></li><li class="page_item page-item-30"><a href="">Wetter</a></li><li class="page_item page-item-32"><a href="">Gästebuch</a></li><li class="page_item page-item-34 current_page_item"><a href="">Galerie</a></li><li class="page_item page-item-36"><a href="">Kontakt</a></li><li class="page_item page-item-38"><a href="">Facebook</a></li><li class="page_item page-item-40"><a href="">Impressum</a></li></ul></div>

Jormungand · 04.01.2014

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

Wird die Regel durch was anderes überschrieben?
Wie bereits erwähnt, findest du das z.B. bei Firefox mit Plugin Firebug raus.
Installieren, dann mit F12 starten. In der Firebug Menüleiste den Button klicken, der einen Mousecursor im Rechteck darstellt. Ist der aktiv, klickst du auf einen Navigationsbutton, der nicht so will, wie er soll.
Im Firebugfenster werden die auf das aktuelle Element aktiven CSS-Regeln angezeigt. Aktive Regeln normal, durchgestrichene wurden von anderen überschrieben.
Neben jeder Regel steht das CSS-Dokument in dem du sie findest und kannst sie zielgerichtet ändern.
Hoffe, das hilft.