Mobil Menü Fehler

Hallo ihr lieben,

ich habe ein Problem mit meinem Menü.
Es soll oben stehen bleiben, was es auch tut in der Desktop Ansicht.
Jedoch werden so am Handy oder Tablet nicht alle vorhandenen Menüpunkte angezeigt wenn man das Menü öffnet. Statt dessen Srollt die Seite im Hintergrund.

Frage: Wie kann man das Problem beheben oder umgehen?

Homepage: https://www.lifetojourney.de/

CSS:

.navbar {
    position:fixed;
    width:100%;
    z-index:100;
}
#logo {
    padding-top: 100px;
}
.page .entry-title {
display: none;
}
body {
    color: #2b2b2b;
    background-color: #FFFFFF;
    word-wrap: break-word;
    font-family: 'helvetica', sans-serif;
    line-height: 1.5;
    font-size: 15pt;
      color: #585858;
}
a:hover { color:#000000!important;
}
a:link { color: #00eded; }
.entry-content a {
font-weight: bold;
}
/* Remove meta data */
.entry-meta .byline, .entry-meta .cat-links { display: none; }
.entry-meta .posted-on { display: none; }
//.page-id-1725 header {display: none !important;}
.grecaptcha-badge { visibility: hidden; }

Vielen Dank schon im voraus.

Zitat von threadi

Du müsstest noch ergänzen:

Code

@media (max-width: 768px) {
.navbar-collapse.collapse.in {
 height: 100vh;
}
}

Vielen dank für die schnelle Antwort, leider funktioniert es nicht so ganz.
Habe jetzt den:

@media (max-width: 768px) {
.navbar-collapse.collapse.in {
 height: 100vh;
}
}

... in die CSS eingefügt und ist aktuell auch noch drin. Man kann nun das Menü weiter nach unten bewegen. Jedoch immer noch nicht bis zum ende. Und im Hintergrund bewegt sich die Homepage beim Scrollen.

[Blockierte Grafik: https://bilderupload.org/image/thumbnail/resized-fbfe63640-screenshot-20220807-11100.jpg]

Auf dem Bild habe ich den Bereich markiert in dem sich die Homepage im Hintergrund am Handy mit scrollt.

Zitat von threadi

Ach das ist ja auch noch 70px nach unten verschoben. Also nimm mal:

Code

@media (max-width: 768px) {
.navbar-collapse.collapse.in {
  height: calc(100vh - 70px);
}
}

Mit dem Scrollrad kann ich auch den Hintergrund scrollen. Denke mal das liegt an Lücken zwischen den Menüpunkten. Am Handy gelingt mir das aber nicht, da scrolle ich normal das Menü und nie den Hintergrund.

Danke dir funktioniert erst mal soweit sehr gut.
Ist das jetzt die sauberste Variante das so zu machen?
Und die Lücke oben im Menü wie auf dem Bild kann man nicht verschwinden lassen?

Zitat von threadi

Eine andere Möglichkeit sehe ich bei diesem Menü nicht.

Die Lücke kriegst Du weg indem Du das Menü nach oben ziehst:

Code

@media (max-width: 768px) {
.navbar-collapse.collapse.in {
  height: calc(100vh - 48px);
  top: 48px;
}
}

Top, vielen dank dir für die schnelle und unkomplizierte Hilfe: :)
Falls du eine bessere oder andere Lösung für das Menü auf Lager hast bin ich gerne bereit für Vorschläge.