Ivan Vasilievich

как вариант
сделай второй line-nav__logo__icon который будет скрыт
после нажатия он будет появляться там где тебе нужно
возможно ты имел ввиду что то другое

Разве div(navbar-container) не должен быть в тэге nav?

Вот так. Оберни все свои элементы в <form type="submit">

const elements = {
  'form': document.querySelector('form'),
  'text': document.querySelector('.out-9'),
  'input': document.querySelector('.i-9'),
}

elements.form.addEventListener('submit', (event) => {
  event.preventDefault();
  const data = elements.input.value;
  elements.text.innerHTML = data;
  elements.form.reset();
});

Хотя и здесь я бы поспорил, поскольку обработчики состояния должны менять Model, а не View. Но так просто легче понять

Я сделал вместо data.value= '', вот так document.querySelector('.i-9').value = '';

https://codepen.io/skytner/pen/vYrQJor?editors=1111

Потому что || - это ленивая операция и приоритет у неё ниже, чем у &&.
=> Сначала будет вычислено выражение 5 === 5 && 3 > 1, которое имеет значение true
А раз оно true, то и правую часть 5 вычислять не нужно.

Логические операторы && и || возвращают свои операнды:

1 && "2" // строка "2"
0 && "2" // число 0

0 || "2" // строка "2"
1 || false // число 1

Логическое И &&: для позитивного результата нужно, чтобы оба операнда были как-true. Проверка идёт слева направо. Как только наткнулись на как-false, возвращается он. Прошли всю цепочку и все по пути были как-true — вернули последний из них.

Логическое ИЛИ || даст позитивный результат, как только наткнётся хоть на один как-true. Его и вернёт. Ну или проверит все значения и если все как-false, вернёт последний из них.

1 && "2" && "habr" // вернёт "habr"
"1" && 0 && "qna" // 0

0 || false || "habr" === "qna" // false, результат ("habr" === "qna")
0 || 1 || 2 || true // 1, дальше проверять не пришлось

Использование !important - это плохая практика. Вам нужно пользоваться специфичностью. "Перебить" конфликтующий стиль.
Я не вижу полной картины с вашими стилями. Специфичность должна быть примерно такой:

section.consultation {
    padding: 45px 20px 80px 20px;
  }

В идеале, если вы укажите еще родителя для элемента section. Разумеется, это работает и для медиа.

Почитать подробно можно тут: https://developer.mozilla.org/ru/docs/Web/CSS/Spec...