Strona rozjeżdża się po wysunięciu nawigacji

Question

Cześć. :)

Posiadam stronę internetową, gdzie zaimplementowałem nawigację, która na desktopie znajduje się z boku witryny, a na urządzeniach mobilnych jest wysuwana.

Właśnie na tych drugich pojawia się problem, bo na mobilnym Chromie oraz tym na komputery (po wejściu w DevToolsy i tryb symulujący urządzenie mobilne) po wysunięciu nawigacji całość się rozjeżdża, w sposób, dzięki któremu jesteśmy w stanie scrollować po całej stronie: 

Natomiast gdy jesteśmy na komputerze i nie użyjemy tego trybu, ale zwyczajnie zmniejszymy okno przeglądarki, to wszystko działa jak należy.

Link do strony.

W czym może leżeć problem? Z góry dziękuję za pomoc! :)

Comments

Fajny design :D

---

Dzięki. :)

Answer 1

Cześć, 

element main-header posiada w bloku deklaracji właściwość width wraz z wartością 100vw. Co na moim komputerze powoduje możliwość scrollowania strony w osi X o jakieś 10px. Jeżeli zamienisz wartość 100vw na 100% problem znika. 

Jeżeli chodzi o urządzenia mobilne to moją propozycją jest zrobienie wysuwanego menu z pozycją position: fixed. Przez co content main pozostanie bez ruchu i strona nie powinna się scrollować. 

PS. Zawsze dla html możesz wymusić overfolow-x: hidden !important; ale nie wiem czy to jest dobre rozwiązanie. 

Comments

Dziękuję za pomoc, ale jeśli chodzi o dodanie position: fixed; do wysuwanego menu, to o ile dobrze zrozumiałem już zostało zrobione. :/ Jego klasą jest .side-navigation i pomimo tej właściwości wygląda tak, jak na zrzucie.

Nawet po dodaniu overfolow-x: hidden !important; do elementu HTML sprawa się nie rozwiązuje, bo całość wygląda w ten oto sposób:

Co można już zauważyć pod linkiem do strony.

---

@media (max-width: 992px) {

.navigation-show .sliding{ 

    margin-left: 200px;
  }

}

Zauważyłem że przez ten margin-left menu zachowuje się dość dziwnie. Jeżeli usuniesz ten margines to prawdopodobnie będzie tak jak ty chciałeś. Najlepiej jakbyś rozdzielił nav z resztą strony. Bo trochę koliduje. Tak mi się wydaję ale mogę się mylić. 

---

To prawda, usunięcie tej reguły daje efekt, ale niestety zależy mi, aby zawartość strony przesuwała się po dodaniu klasy .navigation-show. :/

Będę próbować z tym rozdzieleniem nawigacji od reszty.