Farbliche Hervorhebung des aktiven Menüeintrags

Hallo Kriesi,

ich möchte in den Menüs den jeweils aktiven Menüpunkt farblich hervorheben, was nach einer Anpassung des CSS auf dem “normalen” Bildschirm auch funktioniert. Die aktive Seite wird farblich hervorgehoben und bei Submenüs auch die dazu gehörende Elternseite. Die hierfür erforderlichen Anpassungen habe ich wie folgt vorgenommen:

/* Kennzeichnung des Links und des Hover im Header Main  Menü */
.main_menu a .avia-menu-text { color: #2c2c2c !important; }
.main_menu a:hover .avia-menu-text { color: #0e4580 !important; }

/* Kennzeichnung des Links und des Hover im Header Sub Menü*/
.sub-menu a .avia-menu-text { color: #2c2c2c !important;}
.sub-menu a:hover .avia-menu-text { color: #0e4580 !important; font-weight: bold !important;}
@media only screen and (max-width: 767px) {
.sub-menu a:hover .avia-menu-text { color: #ffffff !important;}
}

/* Kennzeichnung des aktiven Menüpunkts im Header Main Menü*/
.main_menu .current-menu-parent>a .avia-menu-text, .main_menu .current-page-parent>a .avia-menu-text,
.main_menu .current-menu-item>a .avia-menu-text, .main_menu .current_page_item>a .avia-menu-text {
font-weight: bold;
color: #0e4580 !important;
}

/* Kennzeichnung des aktiven Menüpunkts im Header Sub Menü*/
.sub-menu .current-menu-item>a .avia-menu-text, .sub-menu .current_page_item>a .avia-menu-text {
font-weight: bold;
color: #0e4580 !important;
}
@media only screen and (max-width: 767px) {
.sub-menu .current-menu-item>a:hover .avia-menu-text, .sub-menu .current_page_item>a:hover .avia-menu-text { color: #ffffff !important; }
}

Das Problem: Diese farbliche Hervorhebung funktioniert im Responsible Menü (Hamburger Menü) nur eingeschränkt. Dort wird zwar die jeweils aktive Seite innerhalb eines Submenüs hervorgehen, aber nicht die dazu gehörende Hauptseite. Hauptseiten werden gar nicht farblich hervorgehoben.

Wie kann ich das Problem lösen?