А я придерусь к паре вещей: на первом экране у вас не видно ссылки "прокрутите вниз", очевидно что для этого хорошим решением будет сделать для шапки высоту 100vh и исходить уже из нее.
Судя по тому как у вас работает меню, было бы логичнее сделать не полностью скроллирующийся сайт, а скролл блоков. Не помню как называется, что-то типа: full-page slider.
В чем проблема написать функцию, которая срабатывала бы при нажатии на кнопку? В ней вы уже указали бы в какой ID записать заголовок, и там же указываете значение val() для нужного инпута.
Помимо дешевизны, есть другой вариант, не менее важный: будущая поддержка проекта. Согласитесь, куда проще будет рыться в бутстрапе, чем в вашем самописном фреймворке. Это тоже всегда нужно учитывать.
У вас не получается из-за того, что вы не знаете где у вас вообще область hover .menu__item:hover .submenu {display:block;}
Это все, что нужно для того, чтобы при наведении ссылку из подменю, основное не убиралось. Почему? Потому что при наведении на подменю вы все равно в зоне .menu__item, за счет вложенности подменю в эту ссылку.
То что вам нужно это просто создание кнопки, невидимого блока и показ этого блока при нажатии на кнопку, который пишется одной строкой на js. Никаких бутстрапов и тд не нужно.