Navigation Elemente umstylen - Größe und den Abstand zueinander verändern

Hallo,

ich möchte gerne Änderungen an meinem Main-Menü und Sub-Menü vornehmen. Dabei suche ich den nötigen Eintrag im Theme Editor, um die Schriftgröße der einzelenen Links in der Navigation ändern zu können.

Gleichzeitig möchte ich den Abstand zwischen den einzelen Links in der Navigation (sowohl im oberen Menü, als auch im unteren Menü) ändern wollen.

Für die Website nuzte ich das Yoko Theme von elmastudio.

Wäre für jeden Rat dankbar!

Wo finde ich die entsprechenden ID's, bzw. die Source?

Ich möchte nicht jedem einzelnen Link eine unterschiedliche Größe vergeben, vielmehr sollen die Links im Main-Menü (die Navigation über den Banner) kleiner und die Links im Sub-Menü (die Navigation unter dem Banner) größer dargestellt werden.

Leider beherrsche ich kein CSS und daher sind meine Lösungsansätze sehr stark begrenzt. Aus diesem Grund waren meine Bemühungen die style.css dem entsprechend anzupassen ohne Erfolg.

Das mit der Anpassung der Schriftgrößen habe ich nun hinbekommen, obwohl ich gerne auch wissen würde wie es ab font-size: .9em; aufwärts geht. :smile:

Jetzt möchte ich die Links näher zueinander rücken, bei der oberen Navigation ist es mir gelungen in dem ich in Zeile 248 unter

padding:9px 14px;

den Wert der 14 ändere.

Aber wo muss ich welchen Wert ändern damit die untere Navigation A: zentriert dargestellt wird und B: die einzelnen Links des Sub-Menü zusammen rücken?

Danke!

Also so sieht der Eintrag vom Sub-Menü in der style.css aus:

/* --- Sub Nav --- */
nav#subnav {
    margin:0;
    padding:0;
    overflow: hidden;
}
nav#subnav ul.menu {
    margin: 5px 0 0 0;
    padding:16px 0 30px;
    border-top: 1px solid #ddd;
    overflow: hidden;
}
nav#subnav ul.menu li.menu-item {
    width: 14.2468%;
    margin:0px;
    float: left;
    list-style: none;
}
nav#subnav ul.menu li.menu-item a {
    font-size: .9em;
    text-transform: uppercase;
    font-weight: bold;
}
nav#subnav ul.menu li.menu-item ul.sub-menu {
    margin: 0;
    padding: 6px 0 0;
    overflow: hidden;
}
nav#subnav ul.menu li.menu-item ul.sub-menu li.menu-item {
    width: 100%;
    letter-spacing: 0;
}
nav#subnav ul.menu li.menu-item ul.sub-menu li.menu-item a {
    font-size: .8em;
    font-weight: normal;
    line-height:2;
    text-transform: none;
}
/* Posts
--------------------------------------------- */

Super, das mit dem Aneinanderrücken hat prima geklappt, nur der Eintrag für die Zentrierung ergab nicht den gewünschten Effekt. Die Navigationsleiste ist nur ein kleines Stück nach rechts verschoben und dadurch nicht zentriert.

Ist es nicht möglich die Navigationsleiste zu zentrieren?

Ich bedanke mich im Voraus für jegliche Unterstützung!

Wieso lässt sich die untere Navigationsleiste nicht korrekt zentrieren und wie kann ich diese so einstellen, damit sie auch wie die obere Navigationsleiste den gleichen Roll-Over Effekt hat und keinen Unterstrich, sobald man mit der Maus auf einen Link gleitet.

Wenn ich dieses Anliegen bewältigen kann, bin ich vorerst mit dem groben Basteln fertig und kann mich auf andere Dinge konzentrieren.

Daher wäre ich den Wordpress Experten überaus dankbar, wenn sie mich noch aus diesem Dilemma befreien könnten.

Hallo Monika,

danke für deine Antwort. Ich habe deine Anleitung soweit umgesetzt, allerdings hat sie leider nur bedingt geholfen.

Die untere Navigationsleiste ist nach wie vor nicht zentriert dargestellt.

Das mit dem Roll-Over Effekt hat funktioniert, aber mit einem Schönheitsfehler. Es wird nur eine Unterkategorie angezeigt, obwohl mehr vorhanden sind. Auch wird der Text der Unterkategorien nicht mittig angezeigt.

Das ist der Teil den ich unten in meine style.css eingebaut habe:

/* --- Main Nav Copy--- */
nav  #subnav {
      text-align:center;
     margin: 30px auto 0  auto;
     max-width: 70%;
 
}
#branding #subnav ul li {
    float: left;
    list-style: none;
    position: relative;
}
#branding #subnav ul li a {
    margin:0;
    padding:9px 14px;
    display: block;
    font-size: .8em;
    text-transform: uppercase;
}
#branding #subnav ul li:first-child {
    margin: 0px;
}
#branding #subnav ul li a:hover {
    background:#F0F0F0;
    color: #999;
    text-decoration: none;
}
#branding #subnav ul ul {
    display: none;
    float: left;
    position: absolute;
    top: 2em;
    left: 0;
    z-index: 99999;
}
#branding #subnav ul ul ul {
    left: 100%;
    top: 0;
}
#branding #subnav ul ul a {
    background: #F9F9F9;
    padding: 9px 14px;
    width: 11em;
    height: auto;
    text-transform: none;
}
#branding #subnav li:hover > a,
#branding #subnav ul ul :hover > a {
    background: #F0F0F0;
}
#branding #subnav ul ul a:hover {
    background: #F0F0F0;
}
#branding #subnav ul li:hover > ul {
    display: block;
}

Wenn ich das so mache wie du es erklärt hast, rückt die untere Navigation zwar mehr in die Mitte, doch gleichzeitig vergrößert sich der Abstand der einzelnen Links in der unteren Navigation. Aber ich möchte das die untere Navigation sowohl zentriert dargestellt wird, als auch dass die Links dicht zueinander stehen.