Wie erweitere ich die Breite eines Submenü im CSS von Hueman-Theme?

fokofi

Hello
Ich bin neu mit WordPress und habe ein Problem mit der Breite meiner Sub-Menüs auf meiner Webseite.
Ich benutze das Theme Hueman und möchte die Breite der Sub-Menüs erweitern, damit der Text im Menü auf einer einzigen Zeile steht.
Auf welcher Stelle genau im CSS-Code soll ich eine Änderung vornehmen und wie gehe ich konkret vor?
Meine Webseite befindet sich unter folgendem URL:
https://www.pyramid-of-yewe.org
Danke im Voraus für die Hilfe.

Kofi

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

Azrael_0815

#mega-menu-wrap-header #mega-menu-header > li.mega-menu-flyout ul.mega-sub-menu {
z-index: 999;
position: absolute;
width: 150px;
border-top: 0px solid #fff;
border-left: 0px solid #fff;
border-right: 0px solid #fff;
border-bottom: 0px solid #fff;
padding: 0px 0px 0px 0px;
background: #f1f1f1;
max-width: none;
}

Mach die width auf zB 250px, dann ist das Sub-Menü breiter.

fokofi

Zitat von Azrael_0815

#mega-menu-wrap-header #mega-menu-header > li.mega-menu-flyout ul.mega-sub-menu {
z-index: 999;
position: absolute;
width: 150px;
border-top: 0px solid #fff;
border-left: 0px solid #fff;
border-right: 0px solid #fff;
border-bottom: 0px solid #fff;
padding: 0px 0px 0px 0px;
background: #f1f1f1;
max-width: none;
}
Mach die width auf zB 250px, dann ist das Sub-Menü breiter.

Alles anzeigen

Hallo Azrael!
Herzlichen Dank für Deine Hilfsbereitschaft.
Ich habe es gemäss Deiner Anweisung versucht aber leider klappt es nicht!
Ich weiss nicht, wo ich noch was versuchen kann!
Ich schicke Dir hierbei im Anhang ein Screenshoot des Problems mit den Menüs und die CSS-Datei.
Vielleicht kannst anhand der Datei mir genau sagen, wo ich was ändern muss.
Meine Kenntnisse in CSS sind sehr gering!
Danke im Voraus.

Hier sind Auszüge aus der CSS-Datei:

Zitat

/* HEADER NAV */
Media only screen and (min-width: 720px) {
/* common */
#nav-header .nav { }
#nav-header .nav li a { color: #fff; color: rgba(255,255,255,0.7); }
/* level 1 */
#nav-header .nav > li { border-right: none; }
#nav-header .nav > li > a:hover,
#nav-header .nav > li:hover > a { background: rgba(0,0,0,0.1); }
#nav-header .nav li > a:hover,
#nav-header .nav li:hover > a,
#nav-header .nav li.current_page_item > a,
#nav-header .nav li.current-menu-item > a,
#nav-header .nav li.current-menu-ancestor > a,
#nav-header .nav li.current-post-parent > a { color: #fff; }
/* level 2 & 3 */
#nav-header .nav ul { background: #454e5c url(../img/opacity-10.png) repeat; }
#nav-header .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
#nav-header .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; }
}
Media only screen and (max-width: 719px) {
/* common */
#nav-header.nav-container { border-left: 0; border-right: 0; }
#nav-header .container { padding: 0; }
#nav-header .nav { padding-bottom: 20px; }
#header-image-wrap { position: relative; }
}

Alles anzeigen

Zitat

* Child Menu
/* ------------------------------------------------------------------------- */
/* .child-menu { zoom: 1; position: relative; padding: 0 0 20px; } Modif KKF 15. 04. 18*/
.child-menu { zoom: 1; position: relative; padding: 0px 0px 0px 0px; width: 200px; }
.child-menu a { color: #777; font-weight: 600; display: block; padding: 0 44px; }
.child-menu a:hover { color: #16cfc1; }
.child-menu .current_page_item > a { background: #fff; color: #16cfc1; }
/* show only current page items */
.child-menu > li { display: none; }
.child-menu > li.current_page_item,
.child-menu > li.current_page_parent,
.child-menu > li.current_page_ancestor { display: block; }
.child-menu > li.current_page_item > ul ul,
.child-menu > li.current_page_parent > ul ul,
.child-menu > li.current_page_ancestor > ul ul { display: none; }
.child-menu > li ul li.current_page_item ul,
.child-menu > li ul li.current_page_parent ul,
.child-menu > li ul li.current_page_ancestor ul { display: block; }
/* level 1 */
.child-menu > li > a { font-size: 1.25em; display: block; padding: 20px 30px; }

/* level 2 */
.child-menu > li > ul { background: #e9e9e9; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px 0 10px 10px; }
.child-menu > li > ul > li > a { font-size: 0.9375em; background: #f0f0f0; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; padding: 11px 20px;
-webkit-box-shadow: inset 0 1px 0 #f9f9f9;
box-shadow: inset 0 1px 0 #f9f9f9; }
.child-menu > li > ul > li > a:before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
content: "\f055"; font-size: 16px; margin-right: 8px; }
/* level 3 */
.child-menu > li ul ul { background: #f0f0f0; border-bottom: 1px solid #ddd; border-top: 3px solid #ebebeb; border-left: 1px solid #ddd; padding: 6px 0; }
.child-menu > li ul ul a { font-size: 0.9375em; font-weight: 300; padding-top: 7px; padding-bottom: 7px; margin-bottom: 1px; }
.child-menu > li ul ul a:hover { background: #e9e9e9;
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.04);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.04); }
.child-menu > li ul ul li.current_page_item > a { background: #fff;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.04);
box-shadow: 0 1px 0 rgba(0,0,0,0.04); }

Alles anzeigen

Azrael_0815

Gib doch einfach das, was ich gepostet habe, mit anderer Breite im Customizer als Zusätzliches CSS ein. Ich habe das aus Deinem CSS kopiert - Du hast da ein Mega-Menu ;). Oder such Dir jemanden über die Job-Börse, der Dir das macht. Und ich habs mit den Entwickler-Tools ausprobiert; das Sub-Menü wird breiter.

SEpp55

Stimmt grundsätzlich, was Azrael_0815 schreibt!
Aber um den Menüeintrag einzeilig zu bekommen ist eine weitere Änderung notwendig.

Hier beide Einträge, die im Customizer unter Zusätzliche CSS gehören.

Code

#mega-menu-wrap-header #mega-menu-header > li.mega-menu-flyout ul.mega-sub-menu {
    width: 250px;
}




#mega-menu-wrap-header #mega-menu-header > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item:first-child > a.mega-menu-link {
    width: auto;
}

fokofi

Hallo Azrael_0815 & SEpp55!
Ja, es hat endlich geklappt!
Mein Irrtum lag daran, dass ich die falsche CSS-Datei ändern wollte!
Die richtigen Dateien, die man dafür ändern muss, sind die folgenden:
/wp-content/uploads/maxmegamenu/style.css
/wp-content/uploads/so-css/so-css-hueman.css (CSS-Datei des Themes Hueman im Gebrauch)
Da habe ich bloss den gleichen Wert der Menübreite in beiden Dateien angegeben, und es klappt tip top!

In der Datei style.css:

Zitat

#mega-menu-wrap-header #mega-menu-header > li.mega-menu-megamenu > ul.mega-sub-menu {width: 280px; }

In der Datei so-css-hueman.css:

Zitat

#mega-menu-wrap-header #mega-menu-header > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item:first-child > a.mega-menu-link {
width: 280px;
}

Nochmal einen herzlich Dank für die Hilfe!
MFG

SirEctor

Niemals die originalen Dateien ändern. Die Änderungen sind beim nächsten Update wieder weg. Trage deine Änderungen unter Design - Customizer - Zusätzliches CSS ein.

fokofi

Zitat von SirEctor

Niemals die originalen Dateien ändern. Die Änderungen sind beim nächsten Update wieder weg. Trage deine Änderungen unter Design - Customizer - Zusätzliches CSS ein.

@SirEctor
Besten Dank für den Hinweis!
Ich habe soeben die Änderungen als zusätzliches CSS vorgenommen, indem ich die geänderten Zeilen dort eingetragen habe.
Besteht es die Möglichkeit, dass man diese Änderung als separate Datei speichert und durch ein Shortcode z. B. dort einfügt?
So kann einen besseren Überblick vielleicht haben!
Danke im Voraus für Deinen Hinweis in dieser Hinsicht.
MFG
FoKofi

SirEctor

Shortcode für CSS-Änderungen? Das ergibt keinen Sinn. Oder habe ich dich falsch verstanden?

SEpp55

Zitat von fokofi

So kann einen besseren Überblick vielleicht haben!

Dafür kannst du in den Zusätzlichen CSS Erklärungen (Kommentare) einfügen!!
z.B.

Code

/* Breite der Sub-Menues erweitern */
#mega-menu-wrap-header #mega-menu-header > li.mega-menu-flyout ul.mega-sub-menu {
   width: 250px;
}
/* Sub-Menue einzeilig  */
#mega-menu-wrap-header #mega-menu-header > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item:first-child > a.mega-menu-link {
   width: auto;
}

fokofi

Zitat von SEpp55

Dafür kannst du in den Zusätzlichen CSS Erklärungen (Kommentare) einfügen!!
z.B.

Code

/* Breite der Sub-Menues erweitern */
#mega-menu-wrap-header #mega-menu-header > li.mega-menu-flyout ul.mega-sub-menu {
   width: 250px;
}
/* Sub-Menue einzeilig  */
#mega-menu-wrap-header #mega-menu-header > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item:first-child > a.mega-menu-link {
   width: auto;
}

Danke viel mal, SEpp55! Ja, ich habe die Änderungen mit Kommentaren versehen, damit ich später weiss, was ich wo und wann geändert habe.
Nochmal vielen Dank.
MFG

fokofi

Zitat von SirEctor

Shortcode für CSS-Änderungen? Das ergibt keinen Sinn. Oder habe ich dich falsch verstanden?

SirEctor, die Grundfrage war ja nur, ob man diese CSS-Codes als separate Datei in irgendeinem Verzeichnis speichern kann und irgendwie abrufen kann.
Danke im Voraus für allfällige Hinweise.
MFG

SirEctor

Du kannst ein Child-Theme anlegen und dort in der style.css deine Änderungen hinterlegen. Aber wenn es wirklich nur um CSS geht, wäre ein Child-Theme meiner Meinung nach too much.

fokofi

Zitat von SirEctor

Du kannst ein Child-Theme anlegen und dort in der style.css deine Änderungen hinterlegen. Aber wenn es wirklich nur um CSS geht, wäre ein Child-Theme meiner Meinung nach too much.

Danke viel mal für die glasklare Erklärung.
LG

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Wie erweitere ich die Breite eines Submenü im CSS von Hueman-Theme?

Jetzt mitmachen!