• 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

Object Storage Arubacloud
0 głosów
249 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 186 wizyt
pytanie zadane 27 marca 2016 w HTML i CSS przez VeniK Początkujący (270 p.)
0 głosów
2 odpowiedzi 986 wizyt
0 głosów
1 odpowiedź 160 wizyt
pytanie zadane 16 czerwca 2016 w HTML i CSS przez alus152 Bywalec (2,690 p.)

92,655 zapytań

141,546 odpowiedzi

319,984 komentarzy

62,024 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.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...