WordPress - Navigation ist "gespiegelt"

html.de-Forum PHP
1

Halloooo, habe eine kurze Frage…
Ich bin gerade dabei ein WordPress Theme für einen Kunden zu prorammieren, diese Seite auch schon fertig … Es gibt nur ein kleines Problem mit der Navigation. Ich habe LINKS das Logo und RECHTS das Menü … Alles so wie es sein soll. Wenn ich allerdings in der responsive Ansicht bin dreht sich das Menü um z.B …

Normal: (Horizontal) = 1. Startseite 2. Über uns 3. Kontakt
Responsive: (Vertikal) = 1. Kontakt 2. Über uns 3. Startseite

Woran liegt das?
Liebe Grüße!
Danke.

2

Um das beurteilen zu können müsste man einen Link zur betreffenden Seite sehen. Außerdem scheint es kein PHP- sondern eher ein CSS-Problem zu sein …

3

Die Seite bearbeite ich leider Local, da es noch kein webspace gibt.

4

Dann kann dir leider keiner helfen.
Lade die Seite halt auf einen Webspace hoch …

5

Na, dann den CSS Teil der Navi.

6

.site-title{
padding-top:4px;
}
.main-navigation {
clear: both;
display: block;
float: left;
width: 100%;
background-color:#222222;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
float: right;
position: relative;
width:auto;
padding:20px;
}
.main-navigation a {
display: block;
text-decoration: none;
}
.skip-link.screen-reader-text {
padding: 0;
}
.main-navigation ul ul {
background-color:#111111;
display: none;
float: left;
left: 0;
position: absolute;
top: 2.6em;
z-index: 99999;
}
.main-navigation ul ul ul {
left: 100%;
top: 0;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation li:hover{
background-color:#111111;
}

7

Hier der relevante Teil

.main-navigation {
clear: both;
display: block;
float: left;
width: 100%;
background-color:#222222;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
float:right;
}
.main-navigation li {
position: relative;
width:auto;
float:left;
}
.main-navigation a {
padding:20px;
display: block;
text-decoration: none;
color:#fff;
}

.main-navigation li:hover{
background-color:#111111;
}

Nicht LI sondern UL braucht ein float:right.

Bist du dir sicher, dass das Menü erst in der richtigen Reihenfolge ist und beim Verkleinern des Browser sich spiegelt? Kann ich mir nicht vorstellen. Oder fehlt etwas CSS?

@media screen and (max-width: 680px) { 
  .main-navigation ul , .main-navigation li {
  width:100%;
}
8

Ja es ist gespiegelt.

9

Alles klar „Nicht LI sondern UL braucht ein float:right.“ hats gebraucht!
Danke!