1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Top Bar Menu zentrieren Theme "Excellent"

Dieses Thema im Forum "Design" wurde erstellt von isabella, 16. Juli 2017.

  1. isabella

    isabella New Member

    Registriert seit:
    16. Juli 2017
    Beiträge:
    1
    Zustimmungen:
    0
    Hallo alle,

    ich bin blutige Anfängerin mit Wordpress und CSS und arbeite an einer wirklich ganz simplen Seite, dazu verwende ich "Excellent" als Theme.

    Ich möchte der Menü gerne zentrieren, finde allerdings nicht die richtigen Codes mit dene ich mein Stylesheet bearbeiten muss.

    Über jeden Tipp wäre ich sehr sehr dankbar!

    Meine Seite: www.mlgsport.at

    Und hier der Teil vom Stylesheet, den ich vermute bearbeiten zu müssen:

    /* 15.0 Header Section
    ================================================== */
    /* ----- Top Header Bar ----- */
    .top-bar {
    color: #ddd;
    background-color: #fff;
    text-align: center;
    }

    .top-bar .top-bar-menu {
    float: center;
    }

    .top-bar .top-bar-menu a {
    color: #747474;
    display: block;
    font-size: 12px;
    line-height: 40px;
    padding: 0 8px;
    text-align: center;
    text-transform: uppercase;
    }

    .top-bar .top-bar-menu a:hover {
    color: #fb876b;
    }

    .top-bar .top-bar-menu ul li {
    display: inline-block;
    position: center;
    }

    .top-bar .top-bar-menu ul li ul,
    .top-bar .top-bar-menu ul li:hover ul ul,
    .top-bar .top-bar-menu ul ul li:hover ul ul,
    .top-bar .top-bar-menu ul ul ul li:hover ul ul,
    .top-bar .top-bar-menu ul ul ul ul li:hover ul ul {
    visibility:hidden;
    }

    .top-bar .top-bar-menu ul li ul {
    background-color: #fff;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    line-height: 2.667;
    list-style-type: none;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 5px 5px 0;
    position: absolute;
    top: 40px;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    width: 200px;
    z-index: 9999;
    }

    .top-bar .top-bar-menu ul li ul li:last-child {
    border-bottom: none;
    }

    .top-bar .top-bar-menu ul li ul li {
    border-bottom: 1px solid #eee;
    display: block;
    }
    .top-bar .top-bar-menu > ul > li:hover > ul,
    .top-bar .top-bar-menu ul li:hover ul,
    .top-bar .top-bar-menu ul li ul li:hover ul {
    opacity: 1;
    visibility: visible;
    display: block;
    }

    .top-bar .top-bar-menu ul li ul li ul {
    left: 190px;
    top: 0;
    }




    Vielen Dank schon im Voraus!

    LG
     
  2. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Hi,

    Das Element nennt sich
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    und wenn du mit margin-left arbeitest, kannst du den Wert so einstellen, wie es für dich passt.
    Zum Beispiel
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Prozent deshalb, da es sich dann auch auf kleineren Auflösungen, bzw. Bildschirmen entsprechend verhält und wenn du mit pixel (px) Werten arbeiten würdest, müsstest du unter anderem auch @mobile Styles in die style.css einprogrammieren, damit auch Display Größen von Endgeräten, wie Handy, oder Tablet berücksichtigt werden, falls das Theme auf diesen Geräten nicht schon von Haus aus ein extra Menü beinhaltet.

    Das mit dem kompletten Element ist auch aus meiner Sicht deshalb zu empfehlen, da du dir dann die Arbeit sparen kannst, die Werte für die Darstellung des Menü nochmals extra anzupassen.
     
  3. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.638
    Zustimmungen:
    1.778
    Zum Zentrieren des jetzt auf dem Website sichtbaren Menüs würde man z.B. den folgenden Code in "Design -> Customizer -> Zusätzliches CSS" einfügen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    So ist das Zentrieren für kleinere Bildschirme bereits im Theme umgesetzt, das o.g. Code-Beispiel macht es einfach nur allgemeingültig für alle Bildschirmgrössen.

    Das eigentliche "Top Bar" Menü des Themes ist derzeit auf dem Website nicht sichtbar bzw. leer, es wäre ganz oben am Rand zu finden, wie hier in der Theme-Demo. Um das zu zentrieren, würde man anderen Code benötigen.
     
    #3 b3317133, 17. Juli 2017
    Zuletzt bearbeitet: 17. Juli 2017
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden