Menü im Header Zentrieren

maximiwanow
(@maximiwanow)

vor 4 Jahren, 4 Monaten
Hallo Leider habe ich noch ein Problem und zwar ist auf der Webseite das Menü irgendwie nicht zentriert.

und mit folgenden Code komme ich nicht voran, weiß jemand was ich falsch mache? Wichtig ist aber das es auf dem Handy und auf dem Tablet Aufkalbbar bleibt.
```
@media screen and (max-width: 960px) {
#main-navigation-wrap {
margin-left: 45%;
}
}
```
Danke euch im voraus.

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren, 4 Monaten
Probier mal …
```
@media screen and (min-width: 768px) {
  .navbar-default .navbar-collapse {
      display: flex !important;
  }
  .navbar-right {
    float: none !important;
    justify-content: space-around;
  }
}
```
Du hast sicher Verständnis, dass der Zweck unseres Supportforums nicht ist, auf Zuruf CSS-Regeln zu erstellen. Deshalb werde ich auf die Frage auch nicht weiter eingehen, wünsche dir aber viel Erfolg.
- Diese Antwort wurde geändert vor 4 Jahren, 4 Monaten von Bego Mario Garde. Grund: CSS-Regeln erweitert mit display: flex
Thread-Starter maximiwanow
(@maximiwanow)

vor 4 Jahren, 4 Monaten
Hat leider nicht geklappt. ich habe es aber etwas zentrierter hinbekommen mit
```
/*@media screen and (min-width: 768px) {
  .navbar-right {
     margin-left: auto;
    margin-right: auto;
    width: 1080px
  }
}*/
```
– Das Problem ist das es auf allen Bildschirmen dann anders aussieht.

Kann mir jemanden helfen?
Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 4 Monaten
Wenn Du den Code so eingibst, dann kann das nicht funktionieren, weil Du den Code durch /* als Kommentar markierst. */ markiert das Ende des Kommentars. D. h. also, die CSS-Regel wird so gar nicht ausgeführt.
Wenn es Probleme mit anderen Geräten und Bildschirmgrößen gibt, musst Du die entsprechenden Media Queries, siehe z. B. *@media screen and (min-width: 768px) entsprechend definieren.
Ich habe mir das gerade aber mal angesehen und das sah ok aus.
Schau mal auf die folgende Seite, wo das erklärt ist und wo man das interaktiv testen kann.
- Diese Antwort wurde geändert vor 4 Jahren, 4 Monaten von Hans-Gerd Gerhards.
Thread-Starter maximiwanow
(@maximiwanow)

vor 4 Jahren, 4 Monaten

Hallo,

ja ich hab das auskommentiert weil es ja nicht funktioniert. Ich glaube das es auf anderen den verschieden Geräten nicht Zentriert ist weil: man mit width: 1080px die breite des menü bestimmt und Sie startet nicht zentriert deshalb ändert sich das auf den Bildschirmen. Falls ich mich da nicht irre?

Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 4 Monaten

Hallo,
Bego hatte Dir ja netterweise bereits eine Lösung vorgeschlagen. Mit dieser Lösung würde ich an Deiner Stelle weiterarbeiten und damit testen, ob Du das so wie gewünscht umsetzen kannst. Aber wie Bego schon geschrieben hat: Das ist jetzt kein WordPress-Problem und daher können wir Dir dabei nicht mehr Hilfe anbieten.
Deswegen hatte ich Dir ja auch den Link gesendet, damit Du Dich da ein wenig einarbeiten kannst.
Viele Grüße
Hans-Gerd
Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren, 4 Monaten
im Moment ist in der CSS-Regel ein Fehler:
```
.navbar-right {
    margin-left: auto;
    margin-right: auto;
   /* Hier fehlt ein Semikolon */
    width: 1080px float: none !important;
    justify-content: space-around;
}
```
Änder das mal in
```
.navbar-right {
    float: none !important;
    display:flex;
    justify-content: space-between;
}
```
Du kannst mit Mediaqueries festlegen, bis zu (bzw. ab) welcher Bildschirmgröße gelten. @media screen (min-width: 768px) { … } bedeutet „wenn die Webseite auf einem Bildschirmausgegeben wird, der eine Mindestgröße von 768px hat, …“.

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Das Thema „Menü im Header Zentrieren“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten