Горизонтальная прокрутка меню для мобильной версии?

Question

[arsenaljek]

Подскажите как сделать горизонтальную прокрутку верхнего меню но только для просмотра с телефона.
https://codepen.io/arsenaljek/pen/zYvMMrz
Я добавил css

.tabbable .navbar-collapse {
		   overflow-x: auto;
		   overflow-y:hidden;
		   flex-wrap: nowrap;
		}
		.tabbable .navbar-collapse .nav-link {
		  white-space: nowrap;
		}

и присвоил его классу nav. На мобильной версии все работает нормально, но на десктопе больше не открывается выпадающее меню из-за overflow

Comments

[Антон Литвиненко]

Может есть смысл добавлять эти правила только на мобильном?

[arsenaljek]

Anton Litvinenko, имеете ввиду использовать media screen and (min-width:450px){ ?

[Максим]

arsenaljek, у вас скрыто всё - не возможно это обоити

[arsenaljek]

Максим Ленский, а есть альтернативное решение? У меня много выпадающих пунктов меню. Я пробовал заменить слова иконками, но тогда совсем не понятно получается, что какой пункт означает. Поэтому нужно использовать именно слова. И прокрутка в этом плане мне кажется неплохим выходом из ситуации

[Максим]

arsenaljek, overflow вам не подходит так как оно обрежет всё что не входит в него - я думаю как можно обойти это - но скорее всего ни как

[arsenaljek]

Максим Ленский, Вот здесь используется прокрутка для мобильной версии. Очень удачно

[Максим]

arsenaljek, ну конечно удачно - там же нету выпадашки

[arsenaljek]

Anton Litvinenko, А это помогло...

@media only screen and (max-width: 400px) {
		.tabbable .navbar-collapse {
		   overflow-x: auto;
		   overflow-y:hidden;
		   flex-wrap: nowrap;
		}
		.tabbable .navbar-collapse .nav-link {
		  white-space: nowrap;
		}
}

[strelok011]

Стоит пересмотреть структуру сайта и в навигации оставить только корневые ссылки. А внутри категории выводить еще дополнительные селекторы и т.п.
Было хорошее исследование по поводу того, на сколько оправдана идея довести клиента в 3 клика к результату (никакой реальной пользы эта парадигма не несет). К сожалению, ссылки привести не могу.
Попытка натянуть сову на глобус никогда не приводила ни к чему хорошему. Опыт в этой области поимел по самое небалуйся, увы (

[arsenaljek]

strelok011, что плохого в навигации 2 уровня? Например в пункте "Техподдержка" я могу держать множество подпунктов, которые относятся к техподдержке. К сожалению не всё руководство стремиться к минимализму, поэтому иногда только лишь корневыми ссылками не обойтись

[strelok011]

Если всего лишь второго уровня - есть подход типа материал-дизайна. Сайдбар на мобиле, меню раскрывается аккордеоном. Длина текста в ссылке не имеет значения в данном случае, всё может размещаться в несколько строк.
Примеры можно тут посмотреть https://materializecss.com/
Я за рациональный подход и удобство пользования.
Не стоит десктопное решение впихивать на мобилу. Это просто неудобно.

[arsenaljek]

strelok011, спасибо за ссылочку) поизучаю