Максим Тимофеев

Если не ошибаюсь, то этот код должен это делать

ошибаетесь. css понятия не имеет какой адрес страницы сейчас у пользователя. Псевдокласс :active нужен для стилизации элемента в момент нажатия на него.

Вам надо или при генерации на сервере, добавлять к активному пункту какой-то класс, например .active и уже его стилизовать в css. Или тоже самое делать в js (парсить url и устанавливать класс)

Хочу получить индекс кликнутого элемента

получить где? Ибо если это для стилизации, то:
.block:nth-of-type (2) {color:green;}
или counter-increment - htmlbook.ru/css/counter-increment
и точку из класса уберите

используйте keyframes

Делайте анимацию не через transition, а через keyframes

cms wordpress - работает на сервере
скрол - это элемент браузера
Какая связь? Дело не в wordpress, дело в верстке (html+css+js)

А чем Вас yii\widgets\Menu не устраивает?
www.yiiframework.com/doc-2.0/yii-widgets-menu.html
Да и тот же nav не ограничен одним уровнем.

Какие инструменты и фраемворки стоит использовать для работы с css, js, html и почему?

Те которые имеют набор функций необходимый для проекта. Вы думаете есть 1 лучший? У них у каждого свои плюсы и минусы и выбрать оптимальный можно только вникнув в тз.

Есть ли что то, что позволит один раз нарисовать компонент, а потом удобно его использовать?

Пишите свои стили, а может и свой Framework и повторно используете. Для удобства есть less, sass, grunt, бэм
Советую взять какой-нибудь opensoure framework и посмотреть как он устроен, как он собирается из компонентов и т.д. Например - https://github.com/twbs/bootstrap

Как добавить текст слева от картинки в слайдере?

Зависит от того как Вы сделаете сам слайдер

Как можно сделать такой слайдер на чистом CSS?

в поиске куча вариантов:
https://yandex.ru/search/?text=слайдер%20на%20чист...

Какой Вы вообще ответ ожидаете? Готовое решение? Тогда Вам на фриланс биржы. Если нет, то напишите, что именно нужно. Ибо выглядит именно так.

Ну и присоединюсь к Ярослав Иванов. Зачем такая ерунда нужна?

Важно, что бы в тормознутом IE так-же все хорошо смотрелось

Вы придумали машину времени и делаете сайты для 2000-го года?
Bootstrap 4 использует FlexBox. А CSS Grid или Bootstrap это дело вкуса, привычки и требований проекта. Нельзя ответить на вопрос: "что лучше кушать яблоки или груши?"

Есть ли беспроигрышный вариант кроссбраузерной адаптивной верстки?

есть, пустой тег body

почти каждый раз при передаче верстки на бэк-энд, программисты жалуются, что нету бутстрапа

а какая им разница? Я понимаю другим верстальщикам не удобно, так как они не знают Вашего framework, но мне как backend разработчику все равно. Другой вопрос как сверстано? Если там верстка, которую хрен натянешь куда-либо без переписывания, а тут еще и незнакомый велосипед.

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

https://jsfiddle.net/auamvz01/
проблема явно лежит за пределами предоставленного Вами кода. Или Вы привели не весь код или есть еще подключенные js или что-то не закрыто в
<?php include "forma.php" ?>
или где-то русский символ. Или php у Вас девочка и у нее месячные.
Вот пожалуй и все варианты.

1. Это слишком примитивно, подобное показывать не стоит ибо есть намек, что сложнее не сделаете.
2. Дизайн все же имеет значение. Как минимум на первое впечатление. Смотришь на такое и подсознательно уже хочешь найти изъяны, а значит найдут.
3. Что у Вас css код в header делает? Ну я понимаю когда cms и есть необходимость, но для простого шаблона, это явно в файл можно вынести.
4. Почему css не минифицирован и не сжат в 1 файл?
5. Почему google maps 18 раз подключен?
6. В мобилке меню совершенно не читабельное. Это анти UX
7. по семантике промолчу, до нее еще далеко.
8. БЭМ даже не стоило пробовать учитывая уровень всего остального.
Это так капнул верхами.

Фон с background-attachment: fixed
htmlbook.ru/css/background-attachment
навбар с position:fixed; при скроле,
куча готовых скриптов, да и в банальном bootstrap есть affix для этого:
https://getbootstrap.com/docs/3.3/javascript/#affix
так же фиксированное position:fixed; левое меню, например:
https://adminlte.io/themes/AdminLTE/index2.html
возможно еще плавный скрол, например:
https://github.com/nathco/jQuery.scrollSpeed

Если география Вам не важна, то вот есть очень хорошие очные курсы по программированию:
web.mit.edu

Миллион способов, адекватные зависят от верстки, Вы бы дали код что ли. Честно говоря не вижу вообще проблем, только если Вы совсем не в курсе, что такое html. Но тогда стоит прочитать учебник разок.