Helix Ultimate Offcanvas Linkfarben

SnowBerryZ

Liebe Community,

Ich habe mir die letzten Tagen verschiedene Templates angeschaut und blieb dank diverser Posts hier wohl bei Helix hängen 🤭

Nun habe ich eine Frage zum Offcanvas Menü und zwar in den Optionen kann ich einstellen, welche Farbe die aktiven Links bekommen ...

Desktop funktioniert dies soweit ganz gut, aber wenn ich Mobile etwas anklicke, dann haben "alle" Sublinks diese aktive Farbe...

Kann ich das irgendwie per CSS korrigieren oder ist das vielleicht derzeit ein Templates Bug?

Es wäre halt mega nice, wenn da nur Pages und der dazugehörige Link diese Farbe bekäme, bin aber kein Designer und somit nicht wirklich mit CSS befreundet...

Mit freundlichen Grüßen

SnowBerryZ

wolfstar

Ich habe da auch einiges geändert, guck mal was du davon in deiner custom.css gebrauchen kannst:

CSS

/* Beginn OFFCANVAS Toggler */
.burger-icon span {
    width: 25px;
    height: 4px;
    margin: 4px 0;
    border-radius: 3px;
}
.burger-icon span:hover {
    background-color: #00923E;
}
.offcanvas-active .burger-icon>span, #modal-menu-toggler.active .burger-icon>span {
    background-color: #00923E;
}
#offcanvas-toggler::after {
    content: 'Menu';
    Z-index: 1;
    font-size: 12px;
    letter-spacing: 1px;
    color: #000;
    padding-left: 8px
}
body.ltr #offcanvas-toggler.offcanvas-toggler-right {
    float: left;
    margin-left: 15px;
    margin-right: 15px;
}
/* Ende OFFCANVAS Toggler */

/* Beginn OFFCANVAS Menu */
/* Hintergrundfarbe der aktiven Sprache */
div.mod-languages ul li.lang-active {
    background-color: transparent !important;
}
/* Position Suche */
.sp-module-content .mod-languages ul.lang-inline {
    margin-top: -25px;;
}

body.ltr.offcanvs-position-right .body-wrapper {
    right: auto !important;
    left: 0;
    margin-top: 0;
}
body.ltr.offcanvs-position-right.offcanvas-active .body-wrapper {
    left: 300px;
}
body.ltr.offcanvs-position-right.offcanvas-active .offcanvas-menu {
    left: 0;
}
/* Position des OFFCANVAS Menu */
.offcanvas-menu .offcanvas-inner {
    padding: 0 0 0 25px;
}
/* Hintergrundfarbe */
.offcanvas-menu {
    background: rgba(0,0,0,0.2);
}
/* Logo entfernen */
.offcanvas-menu .logo {
    display: none;
}
/* Schriftgröße und Farbe Menüpunkte */
.offcanvas-menu .offcanvas-inner .sp-module ul > li a {
    font-size: 14px;
    text-transform: uppercase;
    color: #d9d9d9;
    font-weight: 500;
}
/* Zeilenabstand der Untermenüpunkte */
.offcanvas-menu .offcanvas-inner ul.menu > li > ul li a {
  line-height: 2.5em;
}
/* Farbe der Untermenüpunkte */
.offcanvas-menu .offcanvas-inner ul.menu > li > ul li a {
    color: #d9d9d9;
    margin-right: 15px;
}
/* Farbe Hover Menüpunkte */
.offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover {
    color: #00923E;
}
/* Farbe und Position der Pfeile für Untermenüpunkte */
body.ltr .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler, body.ltr .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler {
    color: #d9d9d9;
    margin-right: 20px;
}
/* Farbe der Pfeile für Untermenüpunkte */
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent li.menu-parent .menu-toggler {
    color: #d9d9d9;
}
/* Ende OFFCANVAS Menu */

Alles anzeigen

VG Wolfgang

SnowBerryZ

werde ich mir am Wochenende aufjedenfall mal anschauen, vielen Dank für den Ausschnitt

SnowBerryZ

Zitat von wolfstar

Ich habe da auch einiges geändert, guck mal was du davon in deiner custom.css gebrauchen kannst:
VG Wolfgang

Ein Jahr später 🙈 entschuldige, aber das Projekt musste halt erstmal hinten anstehen - ich konnte tatsächlich ein Snippet rauspicken.

Der Rest kannste eigentlich alles in Helix einstellen, ausgenommen den Pfeilen und dem Toggle (der ist bei mir anders) natürlich.

Mal gucken ob ich die Tage hier nochmal in der SuFu was finde, Google hat leider derweil keinen Erfolg gebracht und als nicht Webdesigner wird das schwierig 🤣

Aber wo ein Weg - so auch ein Ziel =]

Aber nur vielleicht 🙈

Lg SnowBerryZ

SnowBerryZ

Für alle die sich ebenfalls über die einheitliche Offcanvas Linkfarbe ärgern und sich das gleiche Verhalten wie im Desktop Menü wünschen, die können folgende CSS Klasse nutzen:

CSS

.offcanvas-menu .offcanvas-inner ul.menu > li.active > a {
    color: #008800;
}

.offcanvas-menu .offcanvas-inner ul.menu > li li.active > a {
    color: #008800;
}

Viel Spass damit =D

svenyeng

Hallo!

Geht auch recht einfach mit Mausklicks:

Gruß

sven

SnowBerryZ

Zitat von svenyeng

Hallo!
Geht auch recht einfach mit Mausklicks:
Gruß
sven

Nein, dann sind alle Submenüs die gleiche Farbe wenn ein Link aktiv ist ... Siehe meinen Screenshot im ersten Beitrag, sonst hätte ich wohl kaum nach einer Lösung gesucht, da ich es ja eingestellt habe.

Auf dem Desktop funktioniert ja diese Einstellung problemlos, nur nicht Mobile

Ohne Submenüs ging es aber

svenyeng

Hallo!

Ah ok, dann hatte ich das etwas falsch verstanden.-

Gruß

sven

SnowBerryZ

Zitat von svenyeng

Ah ok, dann hatte ich das etwas falsch verstanden.-

Oooih ok dann entschuldige bitte das missverständnis, trotzdem vielen lieben Dank das du mitgedacht hast.

Liebe Grüsse Snow