I'm a beginner with Bootstrap 4. My navigation menu includes a dropdown item with the standard caret pointing down, added automatically by Bootstrap.
Now, I want to make the caret point up after opening the dropdown menu for the nav item. Despite extensive online searching, I couldn't find a solution within Bootstrap 4 that doesn't involve font-awesome or workarounds.
Here is the HTML code for my menu (which works fine), including the dropdown item (Item 2):
<nav class="navbar navbar-expand-sm navbar-light">
<a class="navbar-brand" href="#"><img src="img/logo.svg" width="80" height="80" alt="Logo"></a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Item 1<span class="sr-only">(current)</span></a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" data-toggle="dropdown">Item 2</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item 2.1</a>
<a class="dropdown-item" href="#">Item 2.2</a>
<a class="dropdown-item" href="#">Item 2.3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Item 2.4</a>
</div>
</li>
<a class="nav-item nav-link" href="#">Item 3</a>
<a class="nav-item nav-link" href="#">Item 4</a>
</div>
</div>
</nav>
A CSS or jQuery-based solution would be great, as long as it's a clean and direct implementation within Bootstrap. Is this feasible?
If anyone can assist me in altering the caret direction from down to up when the dropdown-item opens, preferably incorporating a smooth animation, I'd greatly appreciate it! Thanks in advance!