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

Question

[Юлия Г]

Здравствуйте. Опытные программисты, подскажите как быть в данной ситуации.
Есть вот такой вот сайт severarm.ru , нужно сделать его под разные экраны. На разширении 660px и ниже поисковик по сайту в div class="top-menu" находит на сами пункты меню, тем самым пункты становятся не видны. Нужно поднять поисковик по выше к H1, но он исчезает, как только я поднимаю его к заголовку. Да и сами пункты меню исчезают, когда расширение становится меньше 500px.
Помогите, пожалуйста, решить данную проблему.
Заранее спасибо.

Comments

[Ankhena]

Также как любой другой сайт, использовать %, vw, флексы и media условия.
Статей и видео на эту тему завались.

Answer 1

[Сергей Я]

Адаптивный макет, всё в %

Answer 2

[maxsolovyov]

Медиа запросами при определенной ширине окна можно менять расположение элементов - htmlbook.ru/css/value/media

Comments

[Юлия Г]

Я, в принципе, так и делаю. Только вот поисковик почему то не хочет подниматься выше к header и заголовку h1, он как бы прячется за него. Тоже самое происходит, если опускаю его вниз. То есть, поисковик по сайту виден только в div class="top-menu" . Выше или ниже, он скрывается. Не могу понять в чем причина.