Алекс Глебов

добавить стили классам плагина
https://github.com/markgoodyear/headhesive.js/blob...

убрать всю вложенность из стилй
html body .wrapper header
Это не предсказуемый код
Вот плагин переместил элемент и все сломалось.
В разметке вообще часто что-то меняется.
.header
Этого достаточно

Еще у вас подключается 2 версии headhesive.js и min
Это одно и тоже просто один сжат, а другой нет.
Надо оставить один.

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

ну еще видяшки по jquery и как подключать плагины.

https://codepen.io/SkiperX/pen/ggdzze
Если только так же его сделать
а по фокусу скрывать

https://v4-alpha.getbootstrap.com/layout/grid/

body.scoll-off {
   position: fixed;
width: 100%;
overflow-y: scroll;
}

только значение window scroll.top нужно сохранить и при закрытии окна подставить

Верстаю на базе бутстраповских классов и сетки

Бутстрап использует smass методологию
Это противоположность бема. Все что нужно о ней знать, это то, что её создатель сам перешел на бем и всем посоветовал.
И бутстрап и бем несовместимы.

Если интересны фреимворки, есть google material lite, он использует бем под капотом.
Сеток под бем тоже куча

Сколько у тебя времени уходит на переопределение стилей бутстрапа? Не быстрее с нуля написать ту же кнопку? Делать один дизайн поверх другого не лучшее решение.
Другой вопрос, если ты через исходники просто меняешь переменные и бутстрап будет заточен под твой проект.
Но не с каждым макетом так можно.

в первой попавшейся теме заглянул в css и увидел pointer-events
https://themeforest.net/item/avada-responsive-mult...

cms собирает страницу из блоков по отдельности
а что если понадобится собрать другую страницу на основе вашей верстки?
вложенность это вообще плохо, поведение блока в зависимости от обертки - тоже.

Верстка это целая отдельная профессия, так что изучать придется много.
Без js делать нечего. все что работает на клиенте придется делать вам.
фримен изучаем js, этой книги хватит. ну еще видяшки по jquery и как подключать плагины.
Еще нужно знать основы php и принцип работы cms. Ну это как дизайнер который не знает html/css он плохой, так и верстальщик, который не понимает что потом происходит с версткой, он тоже плохой. Говорю это потому что слышал мнение от бекенд программистов, что дизайнеры плохие верстальщики)

Это очень сложный макет для 1 раза
alvarotrigo.com/fullPage/examples/navigationV.html...
он должен так работать
высота секции должна подстраиваться под размер экрана. И адаптив нужно делать не только под ширину, но и под высоту.

вы пишите про гриды и ие7
caniuse.com/#search=grid
смотрите caniuse
гриды не все последние версии браузеров поддерживают, их только через неск лет можно начинать юзать.
ие7 даже inline-block не полностью поддерживает. и он уже умер как браузер
дальше ие10 вобще уже не стоит лазить.
Если используете флексы, то только с автопрефиксером.

2. для body margin: 0

.elem {
 @media (max-width: 551px) {
    ...
    }
 @media (max-width: 991px) {
    ...
    }
    @media (max-width: 1200px) {
    ...
    }
}

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

возможно вам нужен автопрефиксер, и все заработает.

еще есть Modernizr, добавляет класс с конкретным свойством в html root, и на основе этого пишется css. так эффективнее, чем подгонять под конкретный браузер.

background: linear-gradient(to top, gray 0%, gray 30%, transparent 30%, transparent 60%, gray 60%, gray 100%);

или картинку в фон png с прозрачностью
если не задавать высоту блоку, чтобы зависела от текста, то должно получиться.

lpmotor.ru
lpgenerator.ru
https://tilda.cc/ru/