[Bug] Dropdown Toggle after pseudo element not present in Navbar ( Screen width > 991px )

[ghost]

Version

1.1.0

Reproduction link

https://jsfiddle.net/nfktrhfm/

Operating System

MacOS

Device

MacBook Air

Browser & Version

Chrome - 81.0.4044.129

Steps to reproduce

1. In AdminNavbar.js, from DropdownToggle remove:
   <b className="caret d-none d-lg-block d-xl-block" />

2. Open Browser to see the dropdown in Navbar

3. No caret is visible after user image

What is expected?

A caret should be visible automatically after dropdown-toggle in navbar without adding it explicitly.

What is actually happening?

No caret is visible even after passing caret as a prop to DropdownToggle in navbar.

---

Solution

1. In _dropdown.scss, change:

.dropdown-toggle:after{ content: unset; }

to:

.navbar{ .dropdown-toggle:after{ margin-top: 10px; height: 0; } }

2. Remove the following from AdminNavbar.js:

<b className="caret d-none d-lg-block d-xl-block" />

Additional comments

Not sure if its a bug or is intentional but comparing to other templates, it should be similar.

[einazare]

Hello there, @ZephyrByte ,

Thank you for your interest in working with our products.
Yes, that is intentional.

Best,
Manu