Игорь

В момент открытия модалки просто на боди вешаете

overflow: hidden;
    position: fixed;

Div которому бекграундом картинку,overflow: hidden;
Создаешь псевдо которому здааешь черный бекграунд с прозрачностью, большой по размерам нужным
Позиционируешь его по левому краю, трансформ ротейт на нужное количество градусов
На родителя оверфлоу хидден

directory: true нужно добавить в таск браузерсинка и будет отображение структуры!

Пользуйтесь поисковиком перед вопросом на тостере :)
идеальное решение

По поводу IE сейчас стандарт 9+
По поводу детального изучения стоит не забывать что "Идеальное - враг Хорошего".
Если вы выбрали php то верстать вам особо не прийдётся и вам нужно учить язык.
Пройдите курс Sorax CSS , для освежения знаний и усвоения некоторых новых моментов.
В первую очередь не забывайте, вы хотите быть программистом поэтому вы должны уметь писать код.
Если вам нравилось детально изучать Css то возможно стоит посмотреть в сторону Front-End.
Javascript сейчас на вершине популярности и благодаря огромному комьюнити и фреймворкам уже сейчас можно писать Мобильные приложения/Игры/Десктоп приложения и тд.
Опять же вам нравилось разбираться со стандартами и прочим и я думаю что это тоже положительный звонок для перехода на темную сторону Front-end.
Php Версии 7+ это уже очень хороший и быстрый язык в сравнении со старыми версиями и ближайшие лет 15 он никуда не денется так как 78% всего интернета это php.

У меня была схожая проблема не так давно, я быстро выучил css/html и пошел пилить фриланс на wp или просто лендинги, в итоге отстал от рынка и тенденций и только сейчас набираю обороты.

Вот полезные ресурс для одноглазых моряков тыц

Что касаться открытого меню
У вас неправильная логика задана
Потому как
<nav id="sidebar" class="active">
Меню закрыто, и при
<nav id="sidebar" class>
Оно открыто, по простому добавьте class="active", по хорошему поправьте :)

Роман нельзя дать однозначный ответ у каждого свои предпочтения и все сугубо индивидуально.
Судя по постановке вопросов, вы начинающий.
Если у вас есть задача сделать интернет магазин для реализации какой то продукции то OC достаточно сложная система имхо.
Если же просто для себя разобраться то не ищите золотой середины, садитесь и делайте.
Попробуйте вокомерс как по мне он значительно проще и для небольших проектов подходит на все 100 процентов
Плюс работы по вп и вокомерс не меньше.

Нашел по моему мнению быстрый и простой способ.
Гугл таблица + csv (json) + php

Гугл таблицы позволяют делать риалтайм экспорт в несколько форматов
"Файл" => "Публикация в Интернете"

После чего на странице html которой нам нужно добавляем данные строки который ниже
И через array вытягиваем значения
<?=$newArray[0][cellName]?>

<?php
header('Content-type: application/json');
 
// Set your CSV feed
$feed = 'Ссылка на размещенный в интернете документ от гугл таблиц';
 
// Arrays we'll use later
$keys = array();
$newArray = array();
 
// Function to convert CSV into associative array
function csvToArray($file, $delimiter) { 
  if (($handle = fopen($file, 'r')) !== FALSE) { 
    $i = 0; 
    while (($lineArray = fgetcsv($handle, 4000, $delimiter, '"')) !== FALSE) { 
      for ($j = 0; $j < count($lineArray); $j++) { 
        $arr[$i][$j] = $lineArray[$j]; 
      } 
      $i++; 
    } 
    fclose($handle); 
  } 
  return $arr; 
} 
 
// Do it
$data = csvToArray($feed, ',');
 
// Set number of elements (minus 1 because we shift off the first row)
$count = count($data) - 1;
 
//Use first row for names  
$labels = array_shift($data);  
 
foreach ($labels as $label) {
  $keys[] = $label;
}
 
// Add Ids, just in case we want them later
$keys[] = 'id';
 
for ($i = 0; $i < $count; $i++) {
  $data[$i][] = $i;
}
 
// Bring it all together
for ($j = 0; $j < $count; $j++) {
  $d = array_combine($keys, $data[$j]);
  $newArray[$j] = $d;
}
 
// Print it out as JSON
echo json_encode($newArray);
 
?>

1) Вариант простой и не совсем правильный

ul.cart_search_block {
    display: none !important;
}

2) Вариант самый правильный (не всегда работает)
Так как вы используете шаблон скорее всего
Заходите в панель управления шаблоном в раздел header/шапка/head
И там должен быть пункт выключения поиска и корзины
или же
Если в шаблоне это сделано через виджет
Переходите в виджеты находите там раздел header coloum или что либо подобное
там будет cart & search / корзина & поиск

3) Вариант лучше первого но хуже второго
Открываете файл head.php/header.php в директории шаблона
и в нем находите строку где будет cart_search_block
и удаляете кусок php
Или
Делаете глобальный поиск по директории шаблона с классом через текстовый редактор
ctrl+shift+f - обычно
и вписываете свойство cart_search_block
по результатам вы найдете php файл где будут не нужные для вас элементы и так же их удаляете

Так же советую проводить такие операции в child-theme

На тему svg

g, polygon, path {
    fill: red !important;
}

Но лучше немного переверстать и сделать правильно
<div class="icon icon-red"></div>

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

.icon:hover {
    background-color: currentColor;
}

Для png юзай
https://developer.mozilla.org/en-US/docs/Web/CSS/m...

Ну и конечно же привет вебдизайн мастеру:)

И такой овал:

создать прямоугольник сделать ему rotate в нужное количество градусов и ему задать отрицательный margin
после чего сделать :before и задать ему нужную высоту и ширину и сделать из него круг куда в контент посадить иконку



Прямоугольник 100 на 100 пикселей с border-radius 30px

круг 40 на 40 бордер радиус 50%

Иконку садить через content

раз
два
три