Начните вот отсюда https://learn.javascript.ru/introduction-browser-e...
Прочтение этой статьи, возможно, наведет вас на мысль как это вообще переделать. Пока логика скрипта выглядит очень странно и зачем там инпут в принципе.
И старайтесь давать названия нормальными английскими словами, чтобы другие люди могли понять о чем вообще идет речь.
Я потратила некоторое время, чтобы догадаться ху из pocup.
Да обычный множественный фон. Поверх картинки затемняющий градиент.
Либо псевдоэлементом, если хочется, но это заметно больше кода.
Конкретно в вашем примере это псевдо.
Если что, любые стили из бутстрапа можно посмотреть в инструментах разработчика и использовать как угодно без бутстрапа.
Не очень ясно как это должно выглядеть.
Но суть какая-то такая https://jsfiddle.net/asd81zt7/1
Порядок можно регулировать с помощью order либо поменять местами в коде.
Ещё должен быть тег nav. Либо вокруг второго меню либо вокруг обоих. Но первое у вас странноватое, поэтому не стала ничего оборачивать, дорабатывайте сами.
Без понятия чем занят этот сайт.
Думаю, вы можете изучить это самостоятельно.
Кстати, на самом сайте у меня для всех элементов определено семейство шрифта "Georgia, 'Times New Roman', Times, serif".
Ну да, ну да. По какой тогда логике вы тут задаете запасные шрифты-то, а?
Или вам пользователи поклялись не удалять шрифты из системы?
В svg у вас raleway указан, если что.
Hidden Fronter, еще раз: у вас внутри svg картинка в png формате. Она не будет выглядеть четко из-за того, что вы перевели её в base64 и засунули в svg, а будет мылить, как мылила бы прямо в png.
Текст в svg у вас написан текстом, буквами. Если по какой-то причине ваш raleway не загрузится пользователю или если вдруг указан local, а у пользователя другая версия шрифта, то текст будет выглядеть не так, как хочется вам или дизайнеру.
Hidden Fronter, цвет текста можно менять и без svg
Смысл текста в лого в svg в том, чтобы он выглядел всегда одинаково, именно так, каким его нарисовал дизайнер и не зависел от шрифта (его наличия и версий). Для этого его переводят в кривые.
В том виде как сейчас, вы можете спокойно использовать span.
https://caniuse.com/?search=text-size-adjust