Support » Thema en CSS/opmaak » Kan mobiele menu niet vinden

  • Hi,
    Ik zou graag op een site van een kennis op de mobiele weergave een WhatsApp-icoontje plaatsen, waarmee je met één klik een appje kunt sturen. Ik gebruik het thema Twenty Twenty-One. Maar nergens kan ik in het css of in de index.php iets vinden als “mobile menu” o.i.d.. Ik zie de specificatie niet, waardoor dat WhatsApp-icoon ook wordt getoond op pc/tablet. Hoe kan ik ervoor zorgen dat dat alleen op je telefoon wordt getoond?

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Guido

    (@guido07111975)

    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

    Guido

    (@guido07111975)

    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

    Guido

    (@guido07111975)

    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.

    Guido

    (@guido07111975)

    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

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)