Tekst toevoegen aan het mobiele menu van Avada
Wanneer je de Avada WordPress thema gebruikt, biedt het standaard een mobiel menu icoon (vaak hamburger-icoon genoemd) zonder begeleidende tekst. Maar soms willen gebruikers het woord “Menu” naast het icoon plaatsen om het voor bezoekers duidelijker te maken. Hieronder vind je een stapsgewijze handleiding over hoe je dit kunt doen:
Stappenplan:
- Login in je WordPress Dashboard. Ga naar je WordPress dashboard door
jouwdomeinnaam.nl/wp-adminin te voeren in je browser en in te loggen met je inloggegevens. - Navigeer naar Avada’s Custom CSS gebied. Ga naar
Avada > Theme Options > Custom CSS. Hier kun je aangepaste CSS toevoegen die op de hele website van toepassing zal zijn. - Voeg de Custom CSS toe. Kopieer en plak de onderstaande code in het Custom CSS veld:
.fusion-icon-bars::after {
content: "Menu";
font-style: normal;
text-transform: uppercase;
font-size: 10px;
padding-left: 0;
position: absolute;
float: right;
margin-top: 30px;
right:4px;
font-family: Quicksand; }
Deze code doet het volgende:
- Het voegt het woord “Menu” toe naast het hamburger-icoon.
- Het stelt het lettertype in op “Quicksand”.
- Het past de grootte, positie en styling van de tekst aan voor een optimale zichtbaarheid en afstemming met het icoon.
Opslaan en controleren. Klik op de ‘Opslaan’ knop om je wijzigingen te bewaren. Ga vervolgens naar je website en verklein je browservenster of bezoek je website vanaf een mobiel apparaat om de veranderingen in het mobiele menu te bekijken.