Bootstrap 5. Как применить эффект наведения курсора мыши на верхнюю часть «Домой» Ширина 100%, когда меню свернуто ⇐ CSS

[Anonymous]

Когда панель навигации сворачивается на мобильных устройствах, я хотел бы, чтобы эффект :hover к пункту верхнего меню «Домой» применялся ко всей верхней панели на 100% ширины. Таким образом, цвет при наведении находится за кнопкой переключения.
Codepen: https://codepen.io/R-P-P/pen/zxOdyJb?editors=1100

Код: Выделить всё

.navbar .nav-link {
padding: 10px 8px 12px 8px !important;
font-size: 2rem;
color: White;
}
.navbar .nav-link:hover {
color: red;
}
#nav-home:hover {background-color: #ffffff;} 

Код: Выделить всё

Home Hover


[*]








[list]
Home
[/list]





[list]
[*]Link
[*]Link
[/list]

Подробнее здесь: https://stackoverflow.com/questions/793 ... width-when