У меня проблема с мобильным меню. Он работает хорошо, но когда я прокручиваю (с липким заголовком), меню становится размытым, а ссылки больше не доступны. Я не могу найти проблему. Может, кто-нибудь сможет мне помочь.

Приходит "активная навигация" в мой класс и деактивирует или делает размытым мобильное меню дыры.

.site-navbar.navbar-scrolled {
  box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: fixed;
  width: 100%;
  z-index: 1030;
  top: 0;
}
0
Marla 25 Ноя 2021 в 16:34
Добро пожаловать в Stack Overflow. Отладка живого сайта здесь не особо актуальна. Вопрос должен быть чем-то, что также будет полезно кому-то еще в будущем. (Кто знает, что будет с этим сайтом.) Если вы сможете сделать минимальную демонстрацию, у вас будет больше шансов получить помощь.
 – 
LSE
25 Ноя 2021 в 17:10
Привет спасибо. Да, я это понимаю. Демо я не могу предоставить. Но я добавляю .. что это стандартный класс (который будет добавлен при прокрутке) с именем navbar-active.
 – 
Marla
25 Ноя 2021 в 17:15
Попробуйте изменить z-index на 1050, чтобы он был выше, чем body-backdrop.
 – 
LSE
25 Ноя 2021 в 17:21
1
Это работает. Большое спасибо!
 – 
Marla
25 Ноя 2021 в 17:40

1 ответ

Лучший ответ

body-backdrop имеет z-индекс 1040.
Таким образом, изменение меню на 1050 решает проблему.

.site-navbar.navbar-scrolled {
  box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: fixed;
  width: 100%;
  z-index: 1050;
  top: 0;
}
0
LSE 25 Ноя 2021 в 17:44