Weergave website op mobiele apparaten

Wie kan mij bijstaan in het beter leesbaar maken van de website op mobiele apparaten? Ik ben wat aan het prutsen geweest in een user.css bestand dat ik heb aangemaakt (en waarnaar uiteraard ook verwezen wordt in de index.php), maar het lukt eigenlijk nog niet om b.v. de gehele menustructuur in de desktop versie te laten "verdwijnen" in de 'smartphoneversie'.
Ik gebruik hiervoor de volgende declaratie: De website is gebouwd met een responsive template. Maar als je in de mobiele weergave een menu-item kiest, dan moet je steeds een heel eind naar beneden scrollen om eerst die menulijst voorbij te komen, alvorens je de pagina die je wil bezoeken kunt lezen.

Er moet dus voor de mobiele weergave ook een andere menustructuur komen, die dan weer niet zichtbaar is voor desktop gebruikers.

Hallo Piet,
Heeft jou template ook een positie offcanvas waar je de menu module kan instellen ?
en of heb je al eens geprobeerd als je je hoofdmenu in top positie te krijgen wat er dan gebeurt in mobiel weergave

@Leen
Ik zal er eens naar kijken. Bedankt voor de tips.

Ik dacht de oplossing gevonden te hebben met onderstaand user.css:
En het werkt (!), in zoverre dat de desktopversie keurig de menu's links weergeeft en de mobile versie de menu's onderaan de pagina weergeeft. Maar: in de desktopversie zit er onderaan de pagina een blanco stuk (waarin de menu's 'hidden' zijn, terwijl in de mobiele versie hetzelfde gebeurt met het gedeelte waar de desktop menu's 'hidden' staan).

Is 'hidden' wellicht niet de juiste oplossing? Maar welke dan wel? Zie de afbeeldingen ter verduidelijking.

Als ik het goed heb komt dit doordat je visibility gebruikt. Gebruik eens display?

Hoor het graag!

@Patrick Smits
Dank voor je reactie! Ik heb het meteen uitgeprobeerd.
De display optie werkt wel voor het mobiele menu, maar niet voor het desktop menu.

Heb naast jouw voorstel ook weer de visibility er in verwerkt, maar dat geeft geen verandering.

Heb je een link dat ik even kan kijken?

Je schrijft dat de website responsive is, maar ik zie geen mobile menu?

Zodra je het beeld verkleint verdwijnt op enig moment het desktopmenu en verschijnt onderaan het mobiele menu: Testomgeving

Lijkt een cache probleem, want op mijn computer werkt het goed. Probeer eens een andere browser.

Heb e.e.a. uitgeprobeerd in Edge en Chrome, alle cache bestanden geschoond, maar in de desktopversie blijft er een groot deel onder de tekst blanco. Dit gebied is net zo groot als het mobiele menu; het menu zie je uiteraard niet vanwege de css declaratie 'hidden'.

Misschien in de template iets ondernemen met het gebied "User 4"? Dat wordt namelijk gebruikt door het mobiele menu. Zie het plaatje van m'n template Allerta.