Waagrechtes Menü mit css formatieren

Hallo Zusammen,

ich verwende WordPress 4.9.5–de_DE mit dem Theme Twenty Fourteen.
Ich würde gerne das ober Menu anpassen, damit es das gleiche Layout
wie das Menü in der linken Seitenlleiste hat.

Mit Hilfe des Forums habe ich geschafft mit css code das linke Menü zu formatieren.

/*-- Menu Links --*/
ul.menu {
list-style-type: none;
margin: 0;
padding: 40px;
}
ul.menu li {
border: 3px solid #000;
border-radius: 15px;
background-color: #99cc66;
margin-bottom: 6px; /*-- Abstand zwischen den Menüpunkten --*/
padding: 1px;
text-align: center;
}
ul.menu li a {
border-radius: 15px;
text-decoration: none;
color: #000;
padding: 5px 0px;
text-align: center;
}
ul.menu li:hover {
background-color: #fff;
}

Jetzt wollte ich das Design mit einer neuen Class auf das Menü oben übertragen, leider klappt es nicht!

/*-- Menue Oben --*/
ul.nav {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
ul.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
ul.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
ul.nav a:hover {
background-color: #005f5f;
}
ul.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}

In den Menü Einstellungen habe ich die class eingetragen!

Happt Ihr einen Tipp woran es liegen könnte?

LG, Markus

Zitat von SirEctor

Nicht die ul bekommt die Class, sondern der li. Die Formatierung stimmt also nicht ganz.

Allerdings gehe ich davon aus, dass das Menü oben bereits eine eigene ID bekommt. Im Standard twenty fourteen müsstest du es mal mit

Code

#primary-menu ul

versuchen. Also das .menu weglassen. Alles andere musst du entsprechend ergänzen.

Das .nav und die extra vergebenen Class brauchst du dann auch nicht.

Danke für den Tipp! habe jetzt folgenden CSS-Code verwendet!
Habe jetzt noch das Problemm das die "BUTTON" relativ hoch sind und ich die
richtige Einstellung nicht finde damit ich die Höhe anpassen kann!

Kannst du mir vielleicht noch einen Tipp geben?

/*-- Navigation oben --*/
.primary-navigation li{
border: 3px solid #000;
border-radius: 15px;
background-color: #99cc66;
margin-bottom: 3px; /*-- Abstand zwischen den Menüpunkten --*/
padding: 1px;
text-align: center;
}
.primary-navigation li a{
border-radius: 15px;
text-decoration: none;
color: #000;
padding: 1px 8px;
text-align: center;
}
.primary-navigation li:hover
{
background-color: #fff;
}

Zitat von Sailor56

Die Einstellungen für die Höhe dieser 'Buttons' sind ...

Code

primary-navigation li {
    height: ...px;
    line-height: ...px;
}

Hier sind aktuell die Werte 48px eingetragen - das kannst du nach Belieben ändern. Aber beide Werte sollten gleich sein, sonst verschiebt sich die Schrift in vertikaler Richtung.

PERFEKT :-) DANKE !!!!
Jetzt habe ich noch eine letzte Frage, gibt es eine Möglichkeit die Menüpunkte in die Mitte (und nicht rechts so wie am Bild) des grünen Balkens zu bringen?

Danke für EURE Geduld!!!!!

LG, Markus

Zitat von SEpp55

Du hast eine einzelne CSS-Anweisung wie folgt:

Code

@media screen and (min-width: 783px) {
 .primary-navigation {
  float: right;
  margin-left: 20px;
 }
 a {
  transition: all .5s ease;
 }
}

Floar right richtet das Menü rechts aus, Wofür das margin-left: 20px sein soll - man weiß es nicht genau :rolleyes:.

Wenn du nun den oberen Teil änderst, sieht das ganze so aus.

Code

@media screen and (min-width: 783px) {
.primary-navigation {
    float: none;
    margin-left: 0;
    text-align: center;
}
 a {
  transition: all .5s ease;
 }
}

DANKE FÜR DEN TIPP :-)
Hat geklappt!

LG, Markus