Как исправить баг с адаптивным меню?

Question

[Дмитрий Качуринец]

https://codepen.io/mutedblues/pen/MmPNPG
Есть такой код, но проблема его в том, что он имеет фиксированную высоту и если добавить пункт меню, то он будет скрываться и нужно будет опять указывать высоту блока. Как это можно исправить?

Answer 1

[Jack Williams]

Ставьте большой max-height max-height: 2000px;, чтобы хватило на бОльшее кол-во пунктов меню. Или сделать max-height + прокрутка

Answer 2

[ⓒⓢⓢ]

почему бы не сделать прокрутку у этой менюшки?

.header .menu-btn:checked ~ .menu {
  max-height: calc(100vh - 58px);
  overflow: auto;
}

ps. если я правильно подумал про мобильную версию ...

Answer 3

[Владимир Коротенко]

Может сделать проще? 20К кода на css, вроде немного.
https://bulma.io/documentation/components/navbar/#...

Comments

[Дмитрий Качуринец]

оу, да подключать либу для такой тривиальной задачи, это сильно)

[Владимир Коротенко]

А в чем проблема? Webpack за вас все лишнее вырежет, упакует вашу страницу в 1 файл причем может заинлайнить стили по желанию.

В итоге будете иметь проект, который после npm run publish
Сам соберет бандл, статические страницы, зальет их на githubpages, а вы займетесь более приятными вещами.

[Jack Williams]

Владимир Коротенко, рубрика "вредные советы"!

[Владимир Коротенко]

Дмитрий Качуринец, Не подключайте. Разберитесь как у них сделано, перенесите к себе, если вы такой пурист.
В общем то дело в нажатии клавиши F12