Currently, I am referring to the official documentation to implement a scenario where a NavItem is only displayed for screen sizes greater than sm.
As per the guidelines provided in the documentation, I have included the following attributes:
https://i.stack.imgur.com/M8Sx4.png
I attempted to apply this concept with the following code snippet:
<NavItem className=".d-none .d-sm-block .d-md-none">
<NavLink
data-placement="bottom"
target="_blank"
title="Profile"
onClick={() => {
props.history.push("/profile-page");
}}
>
<i className="fa fa-bell " />
<p className="d-lg-none">Notifications</p>
</NavLink>
</NavItem>
However, it appears that my implementation has not yielded the desired outcome. The navBar item (Notification Bell Icon) continues to be visible even on screen widths larger than sm:
https://i.stack.imgur.com/h3q3k.png
I am uncertain of what mistake I might be making here. Any insights or suggestions would be greatly appreciated.