Top Bar Menu zentrieren Theme "Excellent"

isabella

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: http://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

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Marcus[IS]

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.

b3317133

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.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Top Bar Menu zentrieren Theme "Excellent"

Jetzt mitmachen!