Menu responsive maken van bestaande website

Ik ben al een tijdje bezig met het responsive maken van een door mij (leek) overgenomen website. Na veel gegoogel is de website (deels) al redelijk goed op een mobiele telefoon te bekijken, maar het menu krijg ik maar niet responsive.

Op deze en deze pagina ben ik een nieuwe template aan het bouwen, maar voor mij is een responsive menu de slagroom op de taart.
Joomla is up to date; waarop de originele template is gebaseerd is mij onbekend.

Hoe nu verder te bouwen, of zijn de verwezenlijkte aanpassingen (in CSS) het maximaal mogelijke voor deze template?

Je zou een responsive menu-module kunnen installeren. Je kunt ook een responsive basistemplate gebruiken. Lijkt me eigenlijk handiger.

Astrid, bedankt voor je snelle reactie. Mag ik uit je antwoord opmaken dat de huidige template simpelweg niet responsive is en dat ik daarom kan proberen tot ik een ons weeg of is dat gewoon de snelste oplossing?
Voor mij geldt overigens dat de weg naar de oplossing even interessant is dan de oplossing zelf. Ik ben nog geen joomlaolist, maar inmiddels wel al een gewoontegebruiker.
De door jou aangedragen oplossingen neem ik zeer ter harte en zal ook resultaten van de zojuist ontdekte Mobile-friendly test eens goed uitpluizen.

Je kan een website responsive maken door gebruik te maken van bijvoorbeeld Bootstrap. Je moet dan de Bootstrap benamingen gebruiken en daarmee definieer je de website in kolommen. Zie getbootstrap.com/2.3.2/getting-started.html .

De basis voor responsive zijn media queries. Zie www.w3schools.com/cssref/css3_pr_mediaquery.asp . Voor elke breedte definieer je een eigen CSS. Dus voor een mobile device wil je de verschillende blokken met informatie onder elkaar hebben en het menu als uitklaplijst. Bij de breedte van een tablet portrait wil je nog steeds het menu hetzelfde hebben als een telefoon, maar andere informatie mag naast elkaar komen. Je kan zo voor elke blok informatie bepalen of het getoond wordt, waar en hoe.

Je kan je website ook fluid maken. Dan werk je met percentages en bijvoorbeeld max-width en min-width. Het verschil met media queries is dat blokken met informatie niet op een geheel andere positie kan zetten als de schermresolutie kleiner wordt.

Je beide voorbeelden missen nog een menu voor telefoons. Dit is met media queries te maken. Verder moet consequent de regelhoogte in CSS worden gedefinieerd. Als een zin dan op een kleinere resolutiescherm over meerdere regels wordt gezet, blijft de tekst mooi leesbaar. Nu gaan de regels in elkaar zitten.

Dank je wel voor je antwoord Dutch. Bootstrap ga/ben ik al wat aan het onderzoeken en met media queries ben ik al een tijdje bezig. Volgens de Mobile-friendly test is de pagina mobielvriendelijk, maar het menu is niet hoe ik het graag zou willen hebben. Misschien zit de meertalige functie daar een beetje in de weg, ik ga die binnenkort eens een andere positie geven.

Bedankt ook voor je tip over de regelhoogte, het oogt mooier en is duidelijker leesbaar. Door deze tip en nog wat media queries staan de menuknoppen nu inmiddels netjes onder elkaar en pagina-breed. Het menu zelf dient echter zelf flink verbouwd te worden. Onder de knoppen zit de structuur van MenuMatic.

Ook de tips van Astrid ben ik aan de slag gegaan: ik heb enkele responsive menu-modules uitgeprobeerd, maar daar zit de huidige instelling van de hoogte van de area in de weg.

Kan wat ik wil bereiken eigenlijk wel met één enkel css bestand?

Dat kan. In je CSS geef je dmv media queries voor schermen van een bepaalde breedte (min breedte, max breedte) de wijzigingen aan tov de standaard website. Je kan ook per type device (smartphone, tablet en pc) een css bestand aanmaken. Zie developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries . Aangezien het niet om een grote site gaat, kan het in één bestand.

Als ik je antwoord goed lees, heb ik mijn punt niet duidelijk gemaakt. De pagina waaraan ik aan het sleutelen ben is inmiddels responsive, maar niet het menu. Wat ontbreekt is de functionaliteit van het menu, dat is nog niet responsive door deze modificaties.
De knoppen lijken onder elkaar te staan door de grotere letters, maar vullen niet de gehele paginabreedte.

getbootstrap.com/examples/navbar/

Bedankt voor de tip. Ik ben deze handleiding voor het maken van de Jumbatron module aan het volgen op YouTube en heb inmiddels een zip bestand gecreëerd. Ben nu aan het back-uppen, daarna ga ik eens kijken hoever ik kom met het responsive maken ervan. Ik vermoed dat ik niet bruin ben na de zomer...

Ik heb nu een eenvoudig responsive menu geïnstalleerd, TheGrue menu. Alles past zich mooi aan, maar er is toch nog iets wat ik niet voor elkaar krijg en wat dit menu nét niet af maakt: als het menu geminimaliseerd is en je opent het, zijn alle menu-items zichtbaar. Het zou veel functioneler zijn als elk sub menu een aparte knop had welke pas na erop te klikken het onderliggende menu opent.

Zijn er nog mogelijkheden om dit (relatief) eenvoudig voor elkaar te krijgen?

Ik sla overigens eerder aangedragen oplossingen niet in de wind, maar ze zijn nog iets te ver van mijn bed.

Website waar ik momenteel e.e.a. op test: test

Met TheGrue menu toch een stapje verder gekomen dat ik graag wil delen voor hen die ook een dergelijk menu gebruiken.

Ik heb m.b.v. css de area waar het menu in staat een padding gegeven (van 21.15%) waardoor het gecentreerd staat. Vervolgens heb ik 31 media queeries toegevoegd om telkens het menu gecentreerd te houden; telkens om de x-pixels 0.3% minder padding.

Ik heb hiervoor in Firefox de functie 'Responsive design weergave' (Shift+Ctrl+M) gebruikt en het scherm telkens wat smaller gemaakt. Als het menu dan onder elkaar kwam een nieuwe media queerie geplaatst.
tot en met Ik hoop dat men er wat aan heeft.

31 media queries voor 1 menu lijkt me wat overdreven, maar als het voor jou de oplossing is dan is het fijn dat je het op het kunnen lossen. Ik zal dit draadje sluiten.