One More Thing » Community » Forum » Pro » Web ontwikkeling » hamburgermenu klapt niet uit op iphone

hamburgermenu klapt niet uit op iphone

Profielfoto van Tim983

Tim983 op 18 september 2017 #

Hallo iedereen,

Ik weet niet of ik hier goed zit, op het WP forum krijg ik helaas weinig reactie en het is een nogal nijpend probleem…

Ik heb een website waarvan het menu op de iphone als hamburgermenu verschijnt. Mijn theme is een child. Als ik het origineel gebruik (Storefront), klapt het menu wel uit. Maar met dat child niet. Ik heb veel aanpassingen gedaan dus heb niks aan een origineel theme.

Op mijn iphone 5S klapt het menu niet uit: niet in Safari en niet in Chrome. Niet in portrait maar ook niet in landscape.

Weet iemand raad..?

De website is: http://www.timhupkes.com/shop

  • Dit onderwerp is gewijzigd 2 maanden, 3 weken geleden door Profielfoto van Night Night. Reden: IN JUISTE SUB-FORUM GEPLAATST
Profielfoto van fatboysmart

fatboysmart op 18 september 2017 #

Ik kan je helaas niet helpen, maar wel bevestigen dat het menu op mijn 5S ook niet werkt in safari. Het ligt dus in ieder geval niet aan je telefoon. Succes!

Profielfoto van Shmoo

Shmoo op 18 september 2017 #

Waarschijnlijk een lagen (z-index) probleem. Ik zit nu op mijn iPad dus kan het niet controleren.

Profielfoto van Shmoo

Shmoo op 18 september 2017 #

Sommige urls zijn ook niet valid.

https://validator.w3.org/

Haal bovenstaande pagina eens door deze tool en dan zal je zien dat bepaalde linkjes niet valid zijn.

 
href="http://linkje.nl  " <--- de afsluitende double quote is niet aanwezig.
 
Profielfoto van feek

feek op 19 september 2017 #

Als je op je hamburger menu klikt, dan krijgt de DIV met class .main-navigation een extra class .toggled

Maar je .primary-navigation blijft dan onzichtbaar omdat “display:none” blijft. Dus zoek het in:

 
.main-navigation.toggled{
   > .primary-navigation {
      display: block;
   }
}
 
 
Profielfoto van Joid

Joid op 19 september 2017 #

Als ik de standaard (desktop) navigatie van Storefront vergelijk met de inhoud van het (mobile) hamburger menu, dan staan daar compleet andere items in: https://demo.woothemes.com/storefront/

Ergo: wordt er wel gebruik gemaakt van een en hetzelfde menu? Is er niet een speciaal mobile menu dat je moet aanmaken in Weergave/Menu’s?

Profielfoto van pruus

pruus op 19 september 2017 #

De hamburger toont geen menu op mobiele devices. Heb het even bekeken. Op desktop zie je de hamburger niet. Overwegingen:
tip 1: https://codepen.io/g13nn/pen/eHGEF
tip 2: zet het hamburgermenu eens aan voor normaal, dan kun je het testen in de gewone browser.
tip 3: http://www.ymc.ch/de/blog/how-to-make-a-hamburger-a-menu-for-mobile-websites/
Ik ben er overigens wel voor om een ‘desktopsite’ en een ‘mobiele site’ te voorzien van een en dezelfde navigatie. Het is voor de gebruiker die met wisselende apparaten werkt ook helderder.

Profielfoto van feek

feek op 19 september 2017 #

Als je mijn css toevoegt werkt je Hamburgermenu. Voeg het maar eens toe via de code-inspector: et voilà (weliswaar hopeloos gelat-out, dus daar moet je ook nog induiken).

Profielfoto van Joid

Joid op 19 september 2017 #

feek op 19 september 2017

Als je mijn css toevoegt werkt je Hamburgermenu. Voeg het maar eens toe via de code-inspector: et voilà

Nee, dat is niet het menu dat in beeld moet komen. Dan haal je gewoon het desktopmenu weer terug in beeld. Die code haalt dan simpelweg de “display: none” weg die het desktopmenu moet laten verwijderen.

Als je https://demo.woothemes.com/storefront/ bezoekt (en de pagina versmalt) dan zie je dat er van bovenaf een menu in beeld verschijnt. Volgens mij moet hij in Weergave/Menu’s een apart (secondair of mobiel of weetikwat) menu creëren.

#geenzinomthemetedownloadenendattetesten

Profielfoto van Joid

Joid op 19 september 2017 #

Bam! Hier, zie je wel.

You’re welcome.

Profielfoto van Shmoo

Shmoo op 19 september 2017 #

🤠 developers!

Clint Eastwood zou nog omrijden om dit soort onzin niet tegen te hoeven komen.

Profielfoto van Tim983

Tim983 op 19 september 2017 #

@fatboysmart @pruus @feek @joid @shmoo Echt onwijs bedankt! Niet te geloven, het bleek uiteindelijk inderdaad bij de menu instellingen te zitten. Per menu (taal) 3 plekken aanklikken. Dat was ‘m! Oh ik ben blij.

Super dank voor jullie meedenken!!

Profielfoto van Shmoo

Shmoo op 19 september 2017 #

Vergeet ook niet een https certificaat in te stellen en je domeinnaam via het https protocol te redirecten.

Bij veel webhosters kun je dit gratis activeren via een dienst die Let’s Encrypt heet.
Wanneer je een webshop of betalingen gaat verrichten via je site is het verplicht om dit via een https verbinding te doen, op die manier is het verzenden van betaalgegevens beveiligt.

Over dit topic

Gestart op 18 september 2017 door Tim983

Laatste reactie door Shmoo

Je kunt alleen reageren met een gratis OMT account.
Heb je geen OMT account? Registreer je dan nu gratis!

Inloggen

 

of Wachtwoord resetten?