Hamburger icon is niet zichtbaar op een mobiel scherm

  • mhrv29

    (@mhrv29)


    8 maanden, 4 weken geleden

    Best mensen,

    Ik word hier een beetje gek, heb al van alles geprobeerd…

    Op onze website die we nieuw aan het bouwen zijn, met gebruik van elementor en het standaard hello thema daarbij, is het hamburger icoon van het hoofd menu niet zichtbaar op een mobiel scherm. Wanneer ik op pc mijn venster verklein is het echter wel zichtbaar.

    Heb al een beetje rond gekeken op google en geprobeerd custom CSS toe te voegen via de customizer van het thema naar zowel een url van een png/svg afbeelding en geprobeerd de breekpunten te verandern maar dit mocht niet baten…

    is hier iemand die mij hiermee kan helpen?

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

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    8 maanden, 4 weken geleden

    Hij is wel te zien op mijn mobiel en retina scherm – je moet een goed kleurweergave hebben om het te zien. Het is dokergrijs en amper zichtbaar op je achtergrondkleur. Het komt er ook door dat het zo staat ingesteld dat het maar voor 5% mag zichtbaar zijn:

    .site-navigation-toggle-holder .site-navigation-toggle
{
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
padding: .25em;
cursor: pointer;
border: 0 solid;
border-radius: 3px;
/*deze bepaalt de 5% */
background-color: rgba(0,0,0,.05);
/* dit bepaalt de kleur*/
color: #494c4f;
}

    Met iets gelijkaardigs als hieronder zou het al beter zichtbaar moeten worden – zo zou je zwart/wit moeten hebben.

    .site-navigation-toggle-holder .site-navigation-toggle{
background-color: rgba(0,0,0,1);
color: #FFF;
}

    Maar er gaat precies, althans bij mij, ook iets mis met het inladen van het icon font die de icoontjes moet tonen. Zowel de hamburger als bij het sluiten van het mobiele menu als ie open staat:

    Ook daarvoor ga je even moeten kijken of er iets mis is met het inladen van je thema assets of als je daar iets aangepast had?

    Thread starter mhrv29

    (@mhrv29)

    8 maanden, 4 weken geleden

    Beste Jeroen,

    Ik wil je hartelijk bedanken, dit stukje code:

    .site-navigation-toggle-holder .site-navigation-toggle{
background-color: rgba(0,0,0,1);
color: #FFF;
}

    heeft mij laten vinden hoe ik het icoon op de juiste manier moet aanspreken. Echter heeft alleen deze code het probleem niet opgelost, ik heb dit zelf aan gepast in de CSS editor van de Customizer naar:

    .site-navigation-toggle-holder .site-navigation-toggle{max-width:32px;
content: url(<url naar iccon>);
}

    En nu laat hij goed in. (ik vermoed dat vrouwlief perongeluk het icoon uit de locale media heeft verwijderd.

    Nu moet ik alleen nog even uitvinden hoe ik het icoon naar een kruis kan laten veranderen op het moment dat het actief (geselecteerd is) maar dit zal iets in de richting zijn van: 

    .site-navigation-toggle-holder-active .site-navigation-toggle-active

    als ik het goed begrepen heb. Zou je dit misschien voor mij kunnen verifiëren? (ik ben nog een beginner op het gebied van CSS)

    Hartstikke bedankt

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Het onderwerp ‘Hamburger icon is niet zichtbaar op een mobiel scherm’ is gesloten voor nieuwe reacties.