Моя отзывчивая навигационная панель не реагирует на мобильные устройства (проблема переполнения?) - PullRequest
Новая
       13

Моя отзывчивая навигационная панель не реагирует на мобильные устройства (проблема переполнения?)

0 голосов
/ 01 июня 2019

Итак, я пытаюсь создать адаптивную навигационную панель для веб-сайта, на настольных компьютерах она прекрасно работает, однако на мобильных устройствах я не работаю с переполнением: скрыто; на самом деле заставит переполнение уйти.

Когда я впервые начал изучать эту проблему, я обнаружил пару форумов, на которых иногда говорили, что вам нужно назначить "overflow: hidden;" к более конкретной части HTML, поэтому я попробовал это, но безрезультатно. Мое переполнение все еще открыто на мобильных устройствах. 

.mobile{
      display: none;
      cursor: pointer;
      overflow-x: hidden
  }

  .mobile div{
    width: 25px;
    height: 2px;
    background-color: #2d3436;
    margin: 5px;
    transition: all 0.3s ease;
  }

  @media screen and(max-width:1024px){
      .main-nav{
          width: 60%;
      }
  }

  @media screen and (max-width:786px){
      body{
          overflow: hidden;
      }
      .main-nav{
          position: absolute;
          right: 0px;
          height: 92vh;
          top: 8vh; 
          background-color: white;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          transform: translateX(100%);
          transition: transform 0.5s ease-in;
        }
        .main-nav li {
            opacity: 0;
        }
        .mobile{
            display: block;
        }
    }

Насколько мне известно (что предоставлено не так много), это должна быть отзывчивая навигационная панель, которая не переполняется на мобильных устройствах, у меня также есть ссылка на тестовый веб-сайт, если вы хотите увидеть его в действии. Я, наверное, просто скучаю по чему-то маленькому, но я бьюсь, я смотрю на это часами. Любая помощь приветствуется!

1 Ответ

0 голосов
/ 01 июня 2019

Попробуйте добавить это в заголовок вашего HTML 

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
...