Чтобы объекты навигационной панели уменьшались при уменьшении ширины браузера, а не смещались, можно использовать медиа-запросы и CSS свойство flexbox.
Вот пример кода, который позволит достичь такого эффекта:
<!DOCTYPE html>
<html>
<head>
<style>
.nav-container {
display: flex;
flex-wrap: wrap;
}
.nav-item {
flex: 1 0 200px;
min-width: 200px;
max-width: 500px;
height: 50px;
background-color: #ccc;
margin: 10px;
}
@media (max-width: 768px) {
.nav-item {
flex-basis: 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="nav-container">
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
</div>
</body>
</html>
В этом примере .nav-container представляет собой контейнер для элементов навигационной панели. Устанавливаем ему свойство display: flex, чтобы элементы располагались в одной строке. Свойство flex-wrap: wrap позволяет строкам переноситься на новую строку при нехватке места.
.nav-item - это элементы навигационной панели. Через flex: 1 0 200px мы указываем, что элементы должны равномерно распределяться по контейнеру, занимая свободное пространство в соответствии с их шириной, которая равна 200 пикселей. Свойство min-width и max-width управляют минимальной и максимальной шириной элементов.
В медиа-запросе @media (max-width: 768px) мы переопределяем свойство flex-basis элементов навигационной панели, устанавливая его в 100% и max-width в 100%, чтобы элементы занимали всю доступную ширину на устройствах с максимальной шириной 768 пикселей.
Таким образом, при уменьшении ширины браузера, элементы навигационной панели будут уменьшаться в размерах, а при недостатке места, они будут автоматически переноситься на новую строку.