Станислав

Ты ему мало чем сможешь помочь. Тут надо садиться и долбить, долбить и еще раз долбить. Ты разве что сможешь направлять его в нужные русла, чтобы он не тратил много времени на то, что ему пока не нужно(ох как мне не хватало когда-то такого наставника). Но вся работа и все труды и оооогромная куча времени, это все с его стороны. Одно из самого важного, он сразу должен понимать, что он сам должен научиться, а не ты его научишь. Ты чутка поможешь.
p.s. мне хочется верить в твоего брата, но как показывает практика 99% таких заинтересованных, останавливаются на своей заинтересованности, или через пару дней после начала изучения чего-либо..

Мне сразу вспомнились всякие адовы существа которые прыгали по окнам винды у "продвинутых" юзеров в начале двухтысячных)))
А точно нужен эдакий хардкор и изврат? никак нельзя научить систему подсказки делать тогда, когда это нужно? В конце концов, если этого мало, сделать мануал.

В bootstrap 4 вообще отказались от glypicon
Юзайте fontawesome.io

$("html:not(:animated),body:not(:animated)").scrollTop($('.field_photo').offset().top);
Прошу прощенья что выдрал кусок кода из своего проекта в чистом виде, времени нет много.
смысл такой:
- через .offset().top получаем отступ нужного элемента от верха страницы
- потом минусуем сколько нужно для прокрута
- потом крутим на полученное значение через .scrollTop()

А что мешает сделать
<button type="button">кнопка</button>
И вешать на нее все что угодно.

потому что твой код отрабатывает только 1 раз при загрузке страницы, после смены свойства опять запускай этот код.
Если еще более подробно, запихай этот код в функцию и запускай ее 1 раз после открытия страницы, и каждый раз после смены свойства.

Если по дизайну:
1. Самое важное, все шрифты ужасные. Убирайте жирность шрифтов, ее необходимо использовать крайне редко. Иногда лучше увеличить размер шрифта просто, чем добавить ему жира. Поработайте со шрифтом меню, сравните как читается меню например тут: www.the-village.ru и у вас. Это не значит, что надо как в примере, просто подумайте, как сделать свое меню более читабельным. Увеличить шрифт или сделать все буквы заглавными, надо ли будет при этом добавлять жирность. Поэкспериментируйте, наш глаз обычно очень легко выбирает из нескольких вариантов тот, который ему больше нравится. Остается предложить самому себе побольше вариантов для выбора)
2. Не надо никаких анимаций, не раздражайте посетителей)
3. К чему эти сиреневые кнопки? У вас прекрасные сочные цвета в лого. Возьмите их за основу, только правильно выберете их оттенок для кнопок и т.п.
4. Зачем на всех страницах эта дурацкая надпись про доставку. Бесплатная доставка это хорошая замануха и приятный бонус, но это не значит что надо на всех страницах сайта в самой шапке выделить огромный блок еще и на всю ширину и аш 73px по высоте. Прилепите это куда-то в аккурат, так чтобы пользователю было удобнее выбирать семечки, а не торащиться постоянно в бесплатную доставку(машинку скорее всего нахер, лишний графический мусор)

В целом все нравится, надо только уделить внимание деталям.
Ну и конечно пустые разделы незаполненные никак не должны быть в меню, но я думаю это просто не успели еще.

Нечего тогда эту часть вообще в input пихать. Прилепи рядом, а как ты это оформишь это уже второй вопрос. Например ребята из бутстрапа предлагают такой вариант:

А так конечно можно смастерить адский велосипед на js, но зачем?