Сделать отзывчивую навигационную панель с полем поиска

Question

У меня есть панель навигации, пример которой можно найти здесь: http://fiddle.jshell.net/4uq6y5fa.

Отображается так, как ожидается, когда все элементы подходят на экране, но если я изменил размер окна, бит меню начнет исчезать. Как это исправить?

Answer 1

На самом деле, я не понимаю, какова ваша точка зрения, вы хотите, чтобы меню реагировало или вы хотите знать, в чем проблема?

Что касается его реагирования, используйте мультимедийные запросы.

w3schools, Правило @media используется для определения различных правил стилей для различных медиа-типов/устройств.

Так, например, вы делаете свою ширину 100% для размера экрана 1920x1080 и 50% для размера 1024x720. Таким образом, ваш навигатор «прыгнет» на 50%, если кто-то изменит размер веб-сайта.

Answer 2

Использование CSS медиа-запросы:

@media only screen (//defined for particular width) 
{ 
//code of nav bar and search box 
} 

например

@media screen and (max-width: 300px) { 
    body { 
     background-color: lightblue; 
    } 
} 

В качестве альтернативы, вы можете определить ширину и высоту в процентах (относительно), используя ет вместо пикселей.