Transforming a Bootstrap 4 dropdown navbar by replacing the caret with Fontawesome 5 icons for Plus and Minus

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;
}

Answer №1

Here is the code snippet you are seeking:

[data-toggle="dropdown"]:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f067";
}

.show [data-toggle="dropdown"]:after {
  content: "\f068";
}
.dropdown-toggle {
  display: flex;
}
.dropdown-toggle:after {
  border: none;
}

To clarify, Bootstrap's caret is achieved through the use of border, rather than content, and it is best to base your content on the dropdown's state (open - also known as .show), rather than using :hover.

.dropdown-toggle[data-toggle="dropdown"]:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f067";
}

.show > .dropdown-toggle[data-toggle="dropdown"]:after {
  content: "\f068";
}
.dropdown-toggle[data-toggle="dropdown"] {
  display: flex;
}
.dropdown-toggle[data-toggle="dropdown"]:after {
  border: none;
}

/* 
 * I increased [data-toggle]'s specificity by adding .dropdown-toggle to it because 
 * SO appears to load bootstrap.min.css after my custom CSS
 * You can reference the CSS provided in the answer if bootstrap.css loads afterward.
 * Check out a working example here: https://jsfiddle.net/websiter/wy46msvh/
 */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<!-- Top Navbar -->
<nav class="navbar navbar-expand-md navbar-custom navbar-light">
  <div class="container justify-content-between">

    <!-- Toggler/collapsibe 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" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When scrolling down, the popup window shifts its position

I have implemented a popup window which displays a list on hover. It works perfectly on the default page, but when I scroll down, the popup also moves with the scrollbar. Below is the HTML code that creates the hidden popup list initially and shows it on ...

Utilizing CSS to create dynamic 3D cube transformations

Exploring the realm of CSS 3D transforms to showcase cubes and cuboids featuring cross-sections has been my current venture. In this endeavor, I'm aiming at compatibility with Chrome, Firefox, and MSIE 11. It has come to my attention that in order to ...

Locate the XPath for text that is within a div tag and adjacent to a span tag

I've searched, but couldn't find an exact match, so my question is about a low HTML code: <div class="column1"> <div> <div class="name"> Dynamic Name <span class="id" title="ID">Dynamic ID</span> </div> </d ...

Struggling to create horizontal buttons for my design

Does anyone have any suggestions for fixing my navigation bar? I attempted to create it myself, but I'm struggling to make everything function properly. https://i.stack.imgur.com/h4yA1.jpg Below are the images of the button in all three states: htt ...

Align the input labels to the right

In the demonstration below, an example is provided for aligning labels to the right of an input field. Is there a way to ensure that the input field takes up 100% of the width? Additionally, can an input be replaced with a textarea or another div element w ...

Developing an unchanging structure for HTML pages

I need assistance in designing an HTML layout with a fixed toolbar at the top and bottom, along with a single centered DIV that should be responsive when the user resizes the window both vertically and horizontally. I have attached a mockup/screenshot fo ...

CSS Grid: Dividing items equally based on the number of items present

Currently, I am delving into grid layouts in CSS and experimenting with code to divide a row. Here is the snippet I am playing around with: .grid-sample { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 4rem; padding: 0 5rem ...

Updating to version 4.1.0 resulted in Symfony and bootstrap layout being disregarded

I'm currently using Symfony 4 along with Bootstrap 4 and have implemented a layout named bootstrap_4_layout.html.twig. After upgrading Symfony from version 4.0 to 4.1.0, I noticed that some parts of the layout are not displaying correctly. How can I ...

Div I add to page is not being styled by CSS

I'm currently developing a Chrome extension that provides a preview of a webpage when hovering over a hyperlink to it. To achieve this, I am creating a div and filling it with different items. However, the issue I'm facing is that the CSS styles ...

Evolving characteristics of Bootstrap popover

I am currently working on a text field and button setup where I have implemented a popover feature using Bootstrap. This is the code snippet I am using: function displayPopover() { $("#text").popover("show"); } The popover appear ...

Struggling to align Social Media Share Buttons in inline format for a website

I'm having trouble aligning these social media share buttons with my inline list. I tried using vertical-align: top; on the <li> element, but it didn't work in Chrome. You can view the page here: Here is the full HTML/CSS code: <!DOCT ...

"Customize your Angular application by updating the background with a specified URL

Hello there, I've been attempting to modify the background URL once a button is clicked. In my CSS, I have the following default style set up. .whole-container { background: linear-gradient( rgba(0, 0, 0, 2.5), ...

Since updating my background-image, the header images have mysteriously vanished

Currently, I am in the process of building a webpage and want to create a default navigation bar that will be consistent across all pages. Below is the code snippet from the file where I wish to include my navigation bar: <html> <head> < ...

Implementing a delay in a CSS menu design while still ensuring compatibility with browsers that do not support JavaScript

I currently have a three-tiered menu that relies on :hover and is controlled by css alone. I am now looking to introduce a slight delay to the hovers, which means transitioning my css :hovers to a .hover class and incorporating jQuery. My concern is whet ...

Introducing a variety of sub-menu fonts within an elegantly designed jQuery vertical accordion menu

I am struggling to achieve different font sizes, colors, and weights for top and sub-menu level links in my simple jQuery vertical accordion. Despite changing the CSS, I can't seem to get it right. What am I missing? Is there an easy way to accomplish ...

What is the best way to seamlessly integrate images in Bootstrap 4.1?

I am having trouble fitting my images exactly into the col-xl-4 divs. Despite my attempts, there is still some white space around the images. You can see the issue visually here. Below is the code I'm using: <div class="row mt-5 mb-2 border"> ...

Switch between two AppBars simultaneously while scrolling in Material UI

In my Header.js component, I have two AppBars. The first one is sticky and the second one is not initially visible. As we scroll down, I want the second AppBar to collapse and the first one to stay stickied at the top of the screen. I looked at the Materi ...

Modify the default navbar from Bootstrap to display as a fixed navbar

Is there a way to change my default navbar into a fixed navbar when I scroll? I have tried adding data-spy="affix" data-offset-top="200", which works but doesn't look quite right. Should I create a new CSS class or is there an easier solution availab ...

Nested tabs in Bootstrap 3

I am currently developing an application that contains a lot of content organized in nested tabs. Everything seems to be working fine except for one issue where clicking on a nested tab does not display the content. <ul class="nav nav-tabs"> <l ...

How can I use JQuery to sum up the numbers within div elements?

Is there a way to automatically number the generated blocks? For example, the first block would display "1", the second "2" and so on. Below is my current code. Simply input the desired number of blocks in the input field. <!DOCTYPE html> <html ...