JARVIS
Wer das Protostar Template nutzt und ein horizontales Menü verwendet, dem wird aufgefallen sein, dass es per default am linken Rand ausgerichtet ist.
Wenn man das Menü jedoch in ein horizontales mittig zentriertes Menü ändern möchte, dann kann man folgendes in der template.css ändern:
.nav {
/* margin-left: 0; */
/* margin-bottom: 18px; */
list-style: none;
text-align: center; /*neu*/
}
.navbar .nav {
position: relative;
left: 0;
display: block;
/* float: left; */
}
.navbar .nav > li {
/* float: left;*/
display: inline-block;
}
Wichtig hierbei sind die float’s die entfernt werden müssen und durch ein display:inline-block ersetzt werden. Ebenso ist oben ein text-align: center wichtig.
Interessiert in verschiedenste IT Themen, schreibe ich in diesem Blog über Software, Hardware, Smart Home, Games und vieles mehr. Ich berichte z.B. über die Installation und Konfiguration von Software als auch von Problemen mit dieser. News sind ebenso spannend, sodass ich auch über Updates, Releases und Neuigkeiten aus der IT berichte. Letztendlich nutze ich Taste-of-IT als eigene Dokumentation und Anlaufstelle bei wiederkehrenden Themen. Ich hoffe ich kann dich ebenso informieren und bei Problemen eine schnelle Lösung anbieten. Wer meinen Aufwand unterstützen möchte, kann gerne eine Tasse oder Pod Kaffe per PayPal spenden – vielen Dank.
So, jetzt haben vereinte Kräfte das Problem gelöst.
Danke für Deine Bemühungen.
Ciao
Girgei
Hi,
das ist schön. Ich werde mir demnächst das Howto nochmal ansehen und ggf. überarbeiten.
Tja, leider auch nix.
Im übrigen geht es nicht um die Menüleiste, sondern ums Zentrieren der Menüeinträge in der /den Zeilen der Menüleiste.
Ich kann es gar nicht glauben, dass das eine so verzwickte Angelegenheit ist ?
Aber vielleicht schaffen wir es doch noch ??
Danke Ciao
Girgei
Schade, es hat nicht funktioniert.
Wie ist das mit den Leerzeichen beim Auskommentieren ??
Nachfolgend die entsprechenden Ausschnitte aus der template.css
.navbar .nav {
position: relative;
left: 0;
display: block;
/*float: left;*/
margin: 0 10px 0 0;
}
Hi Girgei,
du hast dort das margin noch im CSS. Entferne das mal bitte und prüfe die Positionierung der Menüleiste erneut.
Danke für die schnelle Antwort.
Ich werde mich gleich an die Arbeit machen.
Ciao
Girgei
Hallo, würdest Du mir bitte mitteilen wo was gelöscht und wo was eingefügt werden muss??
Danke
Ciao
Girgei
Hallo Girgei,
oh ich denke ich weiß was du meinst. Einfach die entsprechenden Zeilen auskommentieren. In meinem Beispiel sind das die Zeilen mit einem /* Slash und Stern. Außerdem unten den Satz umsetzen.