After spending several days trying to find a solution, I am still struggling. I have managed to create a responsive Navbar with Dropdowns using Bootstrap 4. Now, my goal is to replace the caret with a Plus and Minus sign at the end of each row on small devices, using only CSS.
Here is the HTML code for the Navbar Dropdown:
<!-- Navbar Top -->
<nav class="navbar navbar-expand-md navbar-custom navbar-light">
<div class="container justify-content-between">
<!-- Toggler/collapsible Button Menu -->
<button class="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbarMenu">
<ul class="navbar-nav">
<!-- Link -->
<li class="nav-item">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Dropdown About Us-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
<i class="fab fa-jenkins d-lg-none d-xl-none" aria-hidden="true"></i> About
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ route('about') }}"> About Us</a>
<a class="dropdown-item" href="{{ route('our-club')}}">Our Club</a>
<a class="dropdown-item" href="{{ route('meetings') }}">Meetings</a>
</div>
</li>
</ul>
</div>
</nav>
My CSS:
@media only screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu{
display:block;
}
}
[data-toggle="dropdown"]:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f067";
}
[data-toggle="dropdown"]:hover:after {
content: "\f068";
}
The current issue I'm facing is that when I hover or click on the Plus sign, it changes to a Minus sign, but it remains as a Minus even after closing the dropdown by clicking again. Additionally, the caret is still visible alongside the Plus/Minus signs. Is there a CSS-only solution to address these problems?
If I use the following CSS to remove the caret, it also eliminates the Plus sign:
.dropdown-toggle::after {
display:none;
}