Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Ergebnis 1 bis 3 von 3
  1. #1
    PostRank: 0
    Registriert seit
    16.07.2017
    Beiträge
    1

    Top Bar Menu zentrieren Theme "Excellent"

    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. #2
    PostRank: 10 Avatar von Marcus[IS]
    Registriert seit
    23.08.2009
    Ort
    Uerdingen (KR)
    Beiträge
    4.821
    Hi,

    Das Element nennt sich
    Code:
    .header-navigation-wrap
    und wenn du mit margin-left arbeitest, kannst du den Wert so einstellen, wie es für dich passt.
    Zum Beispiel
    Code:
    margin-left: 10%;
    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. #3
    PostRank: 10 Avatar von b3317133
    Registriert seit
    21.11.2014
    Beiträge
    1.740
    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:
    .header-navigation-wrap {
        text-align: center;
    }
    .main-navigation {
        float: none;
    }
    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.
    Geändert von b3317133 (17.07.2017 um 01:20 Uhr) Grund: Ergänzung

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •