Seeking assistance from the experts! I've successfully rotated the original drop down caret on BS4. However, struggling to rotate the submenu caret. Can someone please review and provide feedback on what might be going wrong? Ideally looking to achieve this using CSS and Bootstrap4 without FontAwesome.
Thank you in advance!
<nav class="navbar navbar-expand-lg navbar-custom py-1" style="background-color:#0082bb;">
<a class="navbar-brand" href="#" base target="parent">Brand</a>
<button class="navbar-toggler update-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerToggle" aria-controls="navbarTogglerToggle" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse show navbar-collapse" id="navbarTogglerToggle">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#" base target="parent">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#" base target="parent">Action</a></li>
<li><a class="dropdown-item" href="#" base target="parent">Another action</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" base target="parent">Submenu action</a></li>
<li><a class="dropdown-item" href="#" base target="parent">Another submenu action</a></li>
.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(-180deg);
}
.dropdown-toggle:after {
transition: 0.2s;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}