Zum Hauptinhalt springen
OpenID

Neu

Thema: Zentrierte Menüleiste (Main Menue) (676-mal gelesen) Vorheriges Thema - Nächstes Thema

0 Benutzer und 1 Gast betrachten dieses Thema.
  • Ruth
  • [*]
Zentrierte Menüleiste (Main Menue)
Hallo, miteinander!

Ich weiß, es ist "altmodisch" ;) aber ich mag unter einem zentrierten Logo oder Banner auch gerne eine zentrierte Menüleiste.

Emanuele hat mir mal erklärt, wie man die Menüleiste zentrieren kann und ich schreibe es jetzt hier auf, vielleicht kann es ja jemand brauchen.

In die index_light.css oder in eine custom.css diesen Code einfügen:

#top_section {
position: relative;
text-align: center;
}
#top_section #main_menu {
float: none;
display:inline-block;
width: auto;
}
#menu_nav {
padding-bottom: 0;
}

Damit die Menüpunkte in den Dropdowns nicht auch zentriert werden, sondern linksbündig bleiben, hier ein text-align: left; einfügen:

.menulevel2, .menulevel3 {
        border: 1px solid #afafaf;
        border-top: 1px solid #cfcfcf;
        border-left: 1px solid #bfbfbf;
        border-radius: 2px;
        background: #fff;
        box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
        text-align: left;
}

Die Menüleiste sieht dann so aus:

  • Zuletzt geändert: 16. April 2016, 14:03 von Ruth

  • Ruth
  • [*]
Antw.: Zentrierte Menüleiste (Main Menue)
Antwort #1
Der Profil-Button ist eine Idee höher als die anderen Buttons.

Damit er gleich groß erscheint, ändert man an dieser Stelle max-height: 1.5em; zu  max-height: 1.4em;

.listlevel1#button_profile img {
    max-width: 1.5em;
    max-height: 1.4em;
    margin: 0;
    margin-right: 0.6em;
    position: relative;
    top: 4px;
}

Die Menüleiste sieht dann so aus:


  • Ruth
  • [*]
Antw.: Zentrierte Menüleiste (Main Menue)
Antwort #2
Bei uns werden später noch auf alle Buttons Icons kommen, deshalb wollte ich auch das Avatar auf dem Profilbutton deutlich größer haben und so, dass es oben über den Button hinausragt.

Dafür habe ich an dieser Stelle noch diese Änderungen vorgenommen:

.listlevel1#button_profile img {
    max-width: 2.3em;
    max-height: 2.3em;
    margin: 0;
    margin-right: 0.5em;
    position: relative;
    top: -9px;
    float: left;
}
  • Zuletzt geändert: 16. April 2016, 14:14 von Ruth

  • Jorin
  • [*][*][*]
  • Administrator
Antw.: Zentrierte Menüleiste (Main Menue)
Antwort #3
Super! Vielen Dank für diese Tipps!  :)