Как адаптировать?

Question

[holfizz]

тут меню для 768px как адаптировать текст под другие разрешение ?
вот код

<header>
    <div class="container">
        <div class="logo">
            <h1 class="logo-text">
                Go <span>Corona</span>
            </h1>
        </div>
        <div class="menu-nav">
            <ul class="">
                <li><a href="#">HOME</a></li>
                <li><a href="#">FEATURES</a></li>
                <li><a href="#">SUPPORT</a></li>
                <li><a href="#">CONTACT US</a</li>
            </ul>
        </div>
        <div class="menu">
            <a href="#" class="menu-btn">
                <span></span>
            </a>
        </div>
    </div>
</header>

@media(max-width: 768px){
  .menu-btn{
    display: block;
    position: relative;
    width: 50px;
    height: 50px;
    margin-left: auto;

  }
  .menu-btn span,
  .menu-btn::before,
  .menu-btn::after{
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: 50%;
    margin-left: -10px;
    width: 25px;
    height: 2px;
    background: #000;
    transition: all 0.7s;
    z-index: 3;
  }
  .menu-btn::before,
  .menu-btn::after {
    content: '';
    display: block;
  }
  .menu-btn::before{
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
    transform: translateY(5px);
  }
  .menu-btn::after{
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  .menu-btn.active span{
    transform: scale(0);
  }
  .menu-btn.active::after{
    transform: rotate(-45deg);

  }
  .menu-btn.active::before{
    transform: rotate(45deg);
  }
  .menu-nav{
    transition: all 0.5s;
    width: 100vh;
    height: 100vh;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    transform: translateX(100%);
    li{
      display: none;
    }
  }
  .menu-nav.active{
    width: 100vh;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    transform: translateX(0);
    background: #fff;
  }
  .menu-nav.active {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    ul > li {
      flex-direction: column;
      display: flex;
      margin-right: 100px;
      text-align: center;
    }

  }
}

Comments

[Ankhena]

С чего бы начать-то?

Сначала нужно закрыть незакрытый тег ссылки CONTACT US. Кстати, текст в коде правильнее писать по правилам языка страницы, а не капсом. Для этого есть text-transform.

Теперь про центр..
Для .menu-nav вы задали

width: 100vh;
    height: 100vh;

И что получается: если высота окна больше ширины, то блок не помещается и выпадает за пределы окна направо.
А если наоборот, высота меньше ширины, то блок не занимает всю ширину окна и прижат влево.

Если вам не понятно что происходит в браузере и инструментов разработчика не хватает, то обводите блоки рамочками (border, outline, lutline-offset, box-shadow).

Возможно, вы хотели задать ширину в vw, а не vh. А лучше 100%, чтобы не вывалилось.

А потом творится что-то еще любопытное: margin-right: 100px; для li в меню. О каком центре может идти речь при таком margin?

[holfizz]

Ankhena, здраствуйте спасибо я только учусь поэтому ошибок выше крыши))