• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
325 wizyt
pytanie zadane 18 listopada 2017 w HTML i CSS przez R.orlinski Mądrala (5,490 p.)

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! :)

komentarz 18 listopada 2017 przez Eimens Maniak (69,240 p.)
Fajny design :D
komentarz 18 listopada 2017 przez R.orlinski Mądrala (5,490 p.)
Dzięki. :)

1 odpowiedź

0 głosów
odpowiedź 18 listopada 2017 przez Eimens Maniak (69,240 p.)

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. 

komentarz 18 listopada 2017 przez R.orlinski Mądrala (5,490 p.)

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.

komentarz 19 listopada 2017 przez Eimens Maniak (69,240 p.)
@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ć. 

komentarz 4 grudnia 2017 przez R.orlinski Mądrala (5,490 p.)

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.

Podobne pytania

+2 głosów
2 odpowiedzi 214 wizyt
pytanie zadane 27 marca 2016 w HTML i CSS przez VeniK Początkujący (270 p.)
0 głosów
2 odpowiedzi 1,209 wizyt
0 głosów
1 odpowiedź 178 wizyt
pytanie zadane 16 czerwca 2016 w HTML i CSS przez alus152 Bywalec (2,690 p.)

93,103 zapytań

142,076 odpowiedzi

321,560 komentarzy

62,445 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...