Is there a way to create a dropdown arrow that rotates when opened?
I've experimented with different approaches, such as using CSS methods like
.bd-aside .btn[aria-expanded="true"]::before {transform: rotate(90deg);}::after and ::before elements, but none have had the desired effect.
Dropdown Inactive:
https://i.sstatic.net/YjKylIpx.png
Dropdown Active:
https://i.sstatic.net/KnXQbXvG.png
The goal is for the arrow to smoothly rotate 180 degrees in 0.15 seconds.
// Navbar Dropdown
$(".ctx-dropdown-toggle").click(function () {
$(this).next(".dropdown-menu").slideToggle(600);
});@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
@import url("https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa8a5a5beb9beb8abbae7a3a9a5a4b98afbe4fbfbe4f9">[email protected]</a>/font/bootstrap-icons.min.css");
/*navbar styling*/
.navbar {
height: 60px;
}
.navbar-brand {
--bs-navbar-brand-padding-y: 0px;
--bs-navbar-brand-margin-end: 0px;
}
...
...
/*dropdown styling*/
.dropdown-menu {
background: #111;
...
}
.bi-chevron-up {
display: inline-block;
}
/*end dropdown*/
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
...
</head>
...A snippet of my navbar showcasing the dropdown with the arrow next to it has been included for reference. Hopefully this provides some insight!