Hoi,
Ik heb een betere optie. De WhatsApp link als “aangepaste link” aan je menu toevoegen.
1) Ga naar de menupagina en klik op “Aangepaste links”.
2) URL: voer de WhatsApp link in.
3) Linktekst: voer in wat je wilt (wordt verborgen door de CSS hieronder).
4) Voeg link aan je menu toe en sla menu op.
5) Dan deze CSS op pagina Extra CSS van de Customizer in je dashboard toevoegen:
#menu-item-1157 a {color:transparent; background:url(https://www.jouw-domein.nl/wp-content/uploads/2021/10/wha.gif); background-repeat:no-repeat;}
Let op: de 1157 wijzigen in de ID van de nieuwe link. Kun je aan de voorkant vd site achterhalen door de link te inspecteren in je browser. Als je niet weet hoe dat moet, laat het even weten.
En wijzig de link in de CSS even in jouw domein, heb ik ivm privacy aangepast.
Guido
Thread starter
ajv66
(@ajv66)
Hoi Guido,
Ja, dat is idd veel beter! Dank!
Alleen is nu het WA-icoon op de pc-site een stuk prominenter dan op de mobiele site, en is het menu verschoven. Zou dat nog aan te passen zijn? Zie https://hartsterk.nl
Gr Arthur
Hoi Arthur,
Je hebt als linktekst de URL vd afbeelding ingevoerd, dat is onjuist. Daar kun je “WhatsApp” of iets anders (korts) invoeren.
Guido
Thread starter
ajv66
(@ajv66)
Ja, kennelijk neemt ie dat mee in de breedte. Ik heb het aangepast en dat scheelt.
Alleen is nu het WA-icoon op de pc-site nog steeds een stuk prominenter dan op de mobiele site. Zou dat nog te verhelpen zijn door in het css specifiek de voorwaarden voor mobiel aan te passen?
Dank & groet, Arthur
Ik vind de grootte in mobiel scherm wel meevallen.
Je zou deze CSS kunnen gebruiken voor groter icoon in klein scherm:
@media screen and (max-width:767px) {
#menu-item-555 a {height:75px; background-size:75px 75px; margin-top:20px;}
}
Maar misschien moet je de icoon ook vervangen door een iets grotere (en vierkante), ivm scherpte in klein scherm.
Guido
Thread starter
ajv66
(@ajv66)
Hi Guido,
Dank, ik drukte me verkeerd uit. Ik bedoel dat dat WA-icoon op de pc meteen in beeld is en op de telefoon in het menu verstopt zit. Terwijl je juist op je telefoon dat icoon meteen zou moeten zien omdat je het daarop ook gebruikt, en op je pc helemaal niet.
Hoi,
Ik begrijp het.
Dan moet je met een child thema gaan werken, want anders ben je je aanpassingen weer kwijt als er een update van het thema is. Bestand template-parts/header/site-header moet dan aangepast worden.
Ik weet niet of je het ervoor over hebt, maar met de betaalde versie van de plugin Options for Twenty Twenty-One kun je een widget in je header plaatsen, en daarin kun je dan de WhatsApp knop plaatsen. De gratis versie is voor jou misschien ook al interessant.
Guido
