Кнопка мобильного меню прыгает вокруг

Question

Я создаю веб-сайт для своей церкви, https://new.churchindenver.org/

, и у меня есть мобильная кнопка «Меню», которая открывает мобильное меню, и кнопка «Закрыть», которая закрывает его.

Оба имеют следующий CSS:

display: inline;
position: absolute;
top:10px;
right: 10px;

Я хочу, чтобы кнопка меню находилась в абсолютном положении top: 10px;справа: 10px;

Когда ширина экрана составляет 601-895px, все работает нормально.Когда ширина экрана <= 600px, css игнорируется, и кнопка «Menu» опускается примерно на 50px.(и логотип тоже падает вниз, кстати, хотя и не так далеко) Кто-нибудь знает, почему? </p>

Спасибо!

Будь!важно или нет, и независимо от того, что я положил туда, кнопка меню (и логотип) находятся в абсолютном положении, но, очевидно, не по отношению к их родительскому элементу.

ОБНОВЛЕНИЕ: Основываясь на предложении Elraphty, я сделал следующий хак, который, кажется, исправил это.Я все еще не уверен, что происходит, но, по крайней мере, это выглядит правильно.Я поставил:

@media (max-width: 600px) {
    #menu {
        top: -41px ! important;
    }
    #logo {
        top: -10px ! important;
    }
}

и теперь кнопка меню и логотип находятся в правильном положении на вершине 10 пикселей.

Answer 1

Вы также можете сделать это

.nav {
     position: relative
 }

 .navItems {
       display: inline;
      position: absolute;
       top:10px;
      right: 10px;
 }

Таким образом, элементы позиционируются абсолютно в элементе nav, а не в элементе body

Или используйте flex

.nav {
     height: 100px;
     display: flex;
     flex-direction: row;
     justify-content: center;
 }

Answer 2

Ошибка вызвана

    top:10px;
    right: 10px;

Поскольку они оба имеют абсолютные позиции, решение записывает медиазапрос, а затем изменяет верхнее и правое значения, когда экран меньше 600px, например

     @media screen and (max-width: 600px) {
        . class {        
            top: 5px ! important;
            right: 5px  ! important;
        }
      }