Beiträge von 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

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

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

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

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

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

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