Overlord934, без разницы, верстайте как удобнее. Лишь бы соответствовало семантике и задумке дизайнера на любой ширине или нормально выглядело на любой ширине, если задумка дизайнера неизвестна.
Хотите все в относительных единицах напишите, хотите грид постройте, хотите изменяйте при media, вариантов много.
В этом коде нажатие на кнопку работает сколько угодно раз.
Код можно заметно сократить, если
1. оперировать классом на родителе, а не на двухэлементах
2. оперировать добавлением и удалением одного класса, а не меняя два.
Меню работает. Но кнопка переключается только один раз. Где допустила ошибку?
Нужно сделать песочницу на codepen.io с видимой проблемой.
И нужно ли еще делать открытие меню без JS для подстраховки? Если да, то как?
С помощью :focus-within
Собственно, тогда и js вовсе не нужен.
Но так никто не делает на проде. На проде такие вещи делают на js.
У вас проблема не в верстке, а в геометрии с арифметикой. Сумму заданных вами размеров вообще невозможно вычислить.
gap в процентах приводит к проблемам и по горизонтали, а уж по вертикали почти всегда. За исключением фиксированной высоты.
Отступы в процентах считаются от ширины родителя. Даже вертикальные.
В итоге у вас там написана дичь.
Т.е. сначала нужно разобраться с тем, что вам нужно, в формулировках на родном языке. Потом с геометрией. И только потом писать свойства. И/или js к ним в помощь.
Я бы последнее заменила на кастомное свойство css.
Это позволит не меняя html, потом использовать это изображение в css как угодно, а не только как фон конкретного элемента. Как фон, как маску, как фон псевдоэлемента или передать в дочерний.
Хотите все в относительных единицах напишите, хотите грид постройте, хотите изменяйте при media, вариантов много.