Mobile Menu mit sichtbarem „active Link“

Im Menü-Modul sind nur sehr wenige Möglichkeiten das Mobile-Menu nach eigenen Wünschen zu gestalten.

Es gibt nur eine Einstellung den aktiven Link zu gestalten.

Menu Aktiver Link = rot

Das sieht dann so aus

Die Gestaltung der Linienfarbe (rot) und der Hintergrundfarbe finden wie gewohnt statt.

Hier befindet man sich auf der Seite „Landing“.

Wesentlich ansprechender

sieht das Mobile-Menu doch so aus…

Hier wurde die Hintergrundfarbe der aktiven Seite eingefärbt.

Das funktioniert mit ein paar Zeilen CSS, die man in ein Code-Modul auf der Menu-Seite schreibt.

Bitte beachten! Dem Menu-Modul wurde hier die Klasse „mein-mobile-menu“ zugewiesen.

<style>
  @media only screen and (max-width: 980px) {
  /* Targets active menu items in Divi mobile menu */
  .mein-mobile-menu li.current-menu-item > a {
    background-color: #bbaa91!important;
  }
}
</style>

Möchte man,

dass, wenn man mit dem Finger auf die nächste ausgewählte Seite geht, sich die Hintergrundfarbe ändert, fügt man noch eine Zeile CSS hinzu.

Hier wird gerade die Seite „Home“ ausgewählt.

<style>
  @media only screen and (max-width: 980px) {
  /* Targets active menu items in Divi mobile menu */
  .mein-mobile-menu li.current-menu-item > a {
    background-color: #bbaa91!important;
  }
}

.et_mobile_menu li a:hover{
  background-color:#d6cfe6;
}
  
</style>