Переключатель навигационной панели не превращается в «X» при раскрытииCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Переключатель навигационной панели не превращается в «X» при раскрытии

Сообщение Anonymous »

Для контекста я использую HTML и CSS (с Bootstrap 5 через теги ссылок/скриптов, подключенные к CDN) для создания внешнего адаптивного статического веб-сайта.
Моя проблема заключается в том, что при раскрытии переключателя он должен превратиться в «Х», но вместо этого ничего не происходит. Как это исправить?
Я включил код панели навигации на случай, если он окажется полезным.

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

.navbar {
background-color: rgba(220, 20, 60, 0.9);
--bs-navbar-padding-y: 0 !important;
}
.navHT {
background: none;
text-decoration: none;
padding-right: 4rem;
}
/* *** START OF NAVBAR TOGGLER *** */
.navbar-toggler {
width: 20px;
height: 20px;
position: relative;
transition: 0.5s ease-in-out;
}
.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
border: 0 !important;
}
.navbar-toggler span {
margin: 0;
padding: 0;
}
.toggler-icon {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: white;
border-radius: 1px;
opacity: 1;
left: 0;
transform: rotate(0turn);
transition: 0.25s ease-in-out;
}
/* .middle-bar {
margin-top: 0px;
}
/* when nav is clicked: */
.navbar-toggler .top-bar {
margin-top: 0px;
transform: rotate(0.375turn);
}
.navbar-toggler .middle-bar {
opacity: 0;
filter: opacity(0%);
}
.navbar-toggler .bottom-bar {
margin-top: 0px;
transform: rotate(0.625turn);
}
/* state when navbar is collapsed: */
.navbar-toggler.collapse .top-bar {
margin: 0px;
margin-top: -20px;
transform: rotate(0turn);
}
.navbar-toggler.collapse .middle-bar {
opacity: 1;
margin: 0px;
filter: opacity(100%);
}
.navbar-toggler.collapse .bottom-bar {
margin-top: 20px;
transform: rotate(0turn);
}

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

[*]




[url=/Users/elisecarlson/coding/name/companyName/contact.html]Contact[/url]


[/list]




Я пробовал менять цифры (с единицами «повернуть») в свойстве CSS Transform: Rotate(), но ничего не происходит. Я искал в Интернете и документации Bootstrap, но не смог понять этого.
Я просмотрел этот пост несколько сообщений SO, но они, похоже, не решили мою проблему (если я что-то не пропустил).

Подробнее здесь: https://stackoverflow.com/questions/784 ... n-expanded
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»