Да. Правильно. fixed; width: 100%; top 0; left: 0;
Только z-index побольше дай для .top-panel
Что бы был больше чем у Этих блоков которые поверх шапки становятся.
Через css я незнаю как. Наверное через js можно.
Но в этой ситуации я рекомендовал бы для .slick-list добавить before,after. Один сверху, другой снизу абсолютом. Дать именно им градиент поверх слайдов.
Просто даже если здесь сделать градиент на слайд то при переключении прокруткой будет тянуть слайд этот градиент за собой.
Я бы сделал следующим образом:
1) .slick-list - убрать overflow: hidden, поставив его на общую секцию что бы горизонтальный скролл не появлялся.
2) Длля всех всех slick-slide которые НЕ slick-active opacity 0. Ну и transition добавить что бы плавно появлялось.
Вы используйте media screen and (max-width: 767px) вместо media screen and (max-width: 768px).
Ведь если посмотреть на это media в стандартном bootstrap - он использует 767 при max-width а 768 (который у Вас) при mix-width joxi.ru/82QQaayi1OokX2