Mobile Menu beim Klick nebenan schliessen

Gelöst chesamedia
(@chesamedia)

vor 7 Monaten, 2 Wochen

Hallo Liebe Community

Ich kann etwas CSS und HTML, bin aber etwas aufgeschmissen bei meinem aktuellem Problem. Ich möchte dass das Menü (auf mobile) geschlossen wird wenn man alles ausserhalb dem Menübereich (grün) klickt. Wenn technisch einfach kann ich mir auch vorstellen, dass 1 Klick nach Menü-Öffnung (egal wohin) das Menü wieder schliesst.

Webseite ist aktuell unter https://bike-guide-engadin.ch/ gehostet (Problem nur in Mobile-Ansicht)

Könnt ihr mir einen Lösungsvorschlag machen? Oder zumindest wo ich ansetzen sollte?

Mit besten Grüssen
Colin

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 8 Antworten – 1 bis 8 (von insgesamt 8)

bscu
(@bscu)

vor 7 Monaten, 2 Wochen

Ich habe keine Lösung, aber ich kann dir sagen, was das Problem ist. Das ist der Slider, denn der „frisst“ den Klick. Vielleicht kann man am Slider etwas einstellen, musst du mal nachsehen.
Moderator threadi
(@threadi)

vor 7 Monaten, 2 Wochen
Das wird durch eine ungünstige Style-Angabe verursacht. Diese bewirkt, dass das mobile Menü vom Theme teilweise vom Slider verdeckt wird. Dadurch ist es nicht mehr anklickbar.

Ursache ist dieser Code hier:
```
@media screen and (max-width: 767px) {
  .mywrap {
    position: static;
    z-index: 999;
    width: 100%;
  }
}
```
Der steht in deiner Seite im Quellcode, nicht in irgendeiner externen Datei wie es üblich wäre. Ich bin daher unsicher woher er stammt. Er ist nicht als „individuelles CSS“ markiert, aber ich weiß nicht wie das dein kommerzielles Theme handhabt. Du nutzt mit „SKT Summer Camp“ ein Theme was man kaufen muss – niemand hier wird dich dabei unterstützen können.

Somit hast Du 2 Möglichkeiten:
- Folgendes individuelles CSS löst das Problem: @media screen and (max-width: 767px) { body.mywrap { position: relative; } } – das müsstest du unter Design > Customizer > Zusätzliches CSS einfügen.
- Du wendest dich an den Support deines Themes: https://www.sktthemes.org/forum/
- Diese Antwort wurde vor 7 Monaten, 2 Wochen von threadi geändert.
Thread-Starter chesamedia
(@chesamedia)

vor 7 Monaten, 2 Wochen

Danke für die Antworten. Das Custom CSS mit position: relative hat das Problem leider nicht gelöst. Ich hab mich an das Forum von SKT gewendet.

Herzlichen Dank

Moderator threadi
(@threadi)

vor 7 Monaten, 2 Wochen

Ich hab mich in dem Code leider etwas verschrieben, ein Leerzeichen fehlt. Müsste so aussehen:

@media screen and (max-width: 767px) {
body .mywrap {
position: relative;
}
}

Thread-Starter chesamedia
(@chesamedia)

vor 7 Monaten, 2 Wochen

View post on imgur.com

es scheint auch mit der relative position nicht zu klappen

Moderator threadi
(@threadi)

vor 7 Monaten, 2 Wochen

Wieso? Man sieht dadurch wieder den Hamburger oben links. Über den kann man das Menü schließen. Ist zumindest damit wieder möglich.

Wenn du wirklich auch in den anderen Bereich zum Schließen klicken willst, solltest du dich wirklich an den Support des Themes wenden.
Thread-Starter chesamedia
(@chesamedia)

vor 7 Monaten, 2 Wochen
Konnte es mit folgenden Code-Snippet lösen:
```
<script>
  jQuery(document).ready(function($) {
    $("body").on("click", function() {
      jQuery.sidr("close", "sidr-main")
  });
});
</script>
```
jetzt könnte man es wohl verfeinern, dass es den on-click nur ausführt wenn die navigation auch offen ist. aber für heute reichts mir.
Moderator Support Moderator
(@moderator)

vor 7 Monaten, 2 Wochen

@chesamedia
Danke für die Rückmeldung 🙂
Der Thread wird nun auf gelöst gesetzt (rechte Seitenleiste, Status), bitte denk nächstes Mal selbst daran (Begründung).