Support » Code oplossingen gezocht » Responsive menu voor mobiel

  • Opgelost Maurice_Extra

    (@maurice_extra)


    Voor een klant heb ik i.v.m. verouderde accordion plugin het menu ditmaal opgezet middels html in header.php en custom css in de customizer. Alleen het responsive deel voor gsm e.d. krijg ik er maar niet netjes genoeg uitzien naar mijn zin.
    Wil graag dat het uit komt te zien (voor zover als mogelijk) als de desktop weergave. Heb vele oplossingen gezien en geprobeerd maar of werkt het niet naar mijn zin of het bevalt niet. Wie heeft de gouden oplossing?

    De link naar de site is een testomgeving voor mij en draait op WP 5.6 met standaard twentytwentyone theme.

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

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

    (@guido07111975)

    Hoi,

    Het thema van die klant heeft geen mobiele weergave van het menu? Welke thema is dat?

    Voor mobiel scherm kun je het best een knop bovenaan plaatsen waar het menu uitklapt als je erop klikt. Ivm de beperkte ruimte die je hebt. Kan niet zonder JavaScript / jQuery overigens. Als je dit wilt laat maar even weten.

    Guido

    Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    Hoi,

    Ik onthou vooral “verouderde” accordion plugin, waarom gebruik je iets verouderd in een nog site die nog live moet gaan?

    Thread starter Maurice_Extra

    (@maurice_extra)

    Dit is een test site naast een reeds bestaande site van de klant die ik van een andere webbouwer heb overgenomen.Reden waarom ik dit wil is om van de verouderde plugins af te komen door het zelf te programmeren.
    Zo duidelijker?

    Thread starter Maurice_Extra

    (@maurice_extra)

    Hoi Guido,

    Bedankt voor je reactie.

    Welk origineel thema het is weet ik niet daar ik de site van de webbouwer heb overgenomen die deze gemaakt heeft en deze de naam van het bedrijf heeft gegeven zodat ik de oorspronkelijke naam van het thema niet weet.

    Thema dat ik in de testomgeving nu gebruik is standaard twentytwentyone.
    Idd wil ik zoiets als een hamburgermenu of een andere goede oplossing die dit voor elkaar krijgt. Op dit moment is het menu responsive maar ziet er niet uit. En juist dat wil ik veranderen.

    Met plugins voor jquery werkt niet omdat deze alleen terugvallen op een menu dat binnen WordPress is aangemaakt hetgeen hier niet het geval is daar ik dit direct in de header.php heb aangemaakt en wordt het als zodanig niet herkent.

    Heb je goede tips en oplossingen dat houd ik mij zeer aanbevolen.

    Alvast bedankt.

    Guido

    (@guido07111975)

    Hoi,

    Ik begrijp dat je dus de kennis hebt om het thema aan te passen.

    Je zou voor een eenvoudig mobiel menu die van één van mijn thema’s kunnen gebruiken (link).

    1) Download mijn thema op je PC en unzip het.
    2) Kopieer mijn thema-map /js met inhoud naar de hoofdmap van jouw thema.
    3) Open bestand functions.php van jouw thema en voeg dit toe:

    
    function mobile_nav_script() {
    	wp_enqueue_script( 'mobile-nav', get_template_directory_uri() . '/js/nav.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'mobile_nav_script' );
    

    4) Open je header bestand voeg dit toe op de gewenste plek:

    
    <div class="mobile-nav-container">
    	<button class="mobile-nav-toggle"><?php _e( 'Menu' ); ?><?php _e( ' +' ); ?></button>
    	<div class="mobile-nav">
    		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    	</div>
    </div>
    

    Let op: meestal heeft het hoofdmenu de ID “primary” maar dus niet altijd. Menu’s worden meestal in bestand functions gedefinieerd.

    5) Open je stylesheet (waarschijnlijk bestand style.css) en voeg dit toe:

    
    /* Verberg in groot scherm */
    .mobile-nav-container {display:none;}
    .mobile-nav-toggle {display:none;}
    .mobile-nav {display:none;}
    
    /* Toon in mobiel scherm */
    @media screen and (max-width:767px) {
    	.mobile-nav-container {display:block; clear:both; padding:0 0 20px; text-align:left;}
    	.mobile-nav-toggle {display:block; clear:both; margin:0 auto; padding:10px 15px;}
    	.mobile-nav {clear:both; padding:10px 20px; background:#f8f8f8; border-bottom:1px solid #ddd;}
    	.mobile-nav .subnav-toggle {position:absolute; float:right; display:block; top:0; right:0; padding:5px 10px;}
    	.mobile-nav ul {list-style:none; margin:0; padding:0;}
    	.mobile-nav ul li {position:relative; margin:0; padding:0;}
    	.mobile-nav ul li a {display:block; margin:0 0 10px; padding:0 0 10px; border-bottom:2px dotted #ddd; line-height:2; text-decoration:none;}
    	.mobile-nav .sub-menu li {margin:0 0 0 20px;}
    }
    

    Deze CSS kun je natuurlijk naar wens aanpassen.

    Volgens mij was dit hem..

    Guido

    Thread starter Maurice_Extra

    (@maurice_extra)

    @guido: Dankjewel. Voor het overgrote deel werkt deze prima. Alleen wat ik wel zie is dat de button class niet op de juiste manier werkt nl wordt het menu volledig weergegeven incl de submenu’s terwijl ik vermoed dat het de bedoeling is/was dat er een knop zou staan om de submenu’s handmatig te laten uitklappen.
    Nu heb ik geprobeerd dit zelf te doen maar het lukt mij (nog) niet.

    Ben in ieder geval superblij naar wat je aan oplossing al hebt bijgedragen maar als je dit ook nog weet op te lossen ben ik echt over the moon.

    Alvast bedankt.

    Gr.

    Maurice

    Guido

    (@guido07111975)

    Hallo Maurice,

    Voor zover ik kan nagaan zou dit gewoon moeten werken.

    Heb je ook een live site waar je dit hebt toegevoegd?

    Guido

    Thread starter Maurice_Extra

    (@maurice_extra)

    Het probleem zit hem in de theme twentytwentyone. Gisteren had ik (schijnbaar met stom geluk) het min of meer werkend met die theme maar was de layout gewoon niet goed omdat dit theme zelf 2 menu’s aanmaakt ook voor mobile devices.

    Nu ik op dit moment het weer probeerde krijg ik gewoon een critical error op de entries in de function.php wat ik ook probeer de fout blijft.

    Gebruik ik jouw theme dan geen foutmelding en lay out prima. Maar dat betekent dat ik alles qua indeling opnieuw moet gaan doen en dat is niet de bedoeling.

    Wat ik nu heb gedaan is te zien op test.extra4you.nl qua mobiel menu. Dit moet echter live gaan bij site http://www.logo-stottertherapie.nl welke site weer een heel ander thema heeft en moet maar zien of en hoe dat uitpakt.

    Guido

    (@guido07111975)

    Hoi Maurice,

    Het huidige mobiele schuifmenu van die site is dus verouderd? Want hij werkt nog prima merk ik.

    Je kunt de bouwer van dit thema (Frisser) dus niet meer benaderen, voor een update?
    Zo niet, dan kun je het beste dat thema even kopiëren naar een testomgeving en daar aan de slag gaan. Ipv met Twenty Twenty-One. Want mijn code moet gewoon werken, zonder fouten. Als je er echt niet uitkomt wil ik dat tegen een kleine vergoeding ook wel even toevoegen, maar dan moeten we contact met elkaar opnemen buiten dit forum.

    Guido

    Ben ook bezig met het menu voor Twenty Twenty-One. De Max Mega menu werkt bij mij. Bij vorige sites met plezier toegepast. Moet nog verder gaan instellen en weet dus nog niet of ik tegen iets geks oploop. Hun website geeft nog geen melding van dit theme overigens.

    Thread starter Maurice_Extra

    (@maurice_extra)

    @guido: verouderd en een veiligheidsrisico mogelijk dus vandaar. tot mijn geluk kwam ik erachter dat niet de plugin maar het thema het mobiele menu ondersteunt dus was een geluk bij een ongeluk. nog wat styling issues opgelost en het werkt het eigenlijk prima nu. alleen nog even stoeien met het hover menu want de tekst ernaast klapt ook het aantal regels naar onder al naar gelang het aantal regels van het submenu. Dit is de volgende taak. Komt ook wel weer goed.

    Thread starter Maurice_Extra

    (@maurice_extra)

    @loek: Max Mega Menu kan ik niet gebruiken daar thema maar 1 menu toelaat en dit al in gebruik is voor het mobiele menu en omdat het juist de bedoeling is om zoveel mogelijk af te stappen van plugins.
    Goede nieuws is dat het al is gelukt.

    Thread starter Maurice_Extra

    (@maurice_extra)

    Topic is gesloten

13 reacties aan het bekijken - 1 tot 13 (van in totaal 13)
  • Het onderwerp ‘Responsive menu voor mobiel’ is gesloten voor nieuwe reacties.