Helix Ultimate Offcanvas Linkfarben

SnowBerryZ · 17. Mai 2023

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 · 17. Mai 2023

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 · 19. Mai 2023

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