WordPress - Navigation ist "gespiegelt"

[justin1234]

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.

 

[threadi]

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 ..

 

[justin1234]

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 ..

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

 

[maria1]

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

 

[djheke]

Na, dann den CSS Teil der Navi.

 

[justin1234]

Na, dann den CSS Teil der Navi.

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

 

[djheke]

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

 

[justin1234]

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

Ja es ist gespiegelt.

 

[justin1234]

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