Show link title on mobile menu - html

Question

I want to use icons instead of text in my navbar, but display title when I hover. The "title" text displays fine on both mobile and regular versions. But on mobile display, I want to show the title text next to the icons automatically without hovering. the code below shows the icons (title) when i hover over menu item. but i want the title displayed without hovering when the hamburger menu is open on mobile.
<nav class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="/index.shtml"><img src="images/cardinal.png" width="80" alt=""/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <i class="fas fa-home"></i> </li>
<li class="nav-item"> <a class="nav-link text-white" href="memberinfo.html" title="Members"><i class="fas fa-user-friends"></i></a> </li>
<li class="nav-item"> <a class="nav-link text-white" href="faq.shtml" title="FAQ"><i class="far fa-question-circle"></i></a> </li>
<li class="nav-item"> <a class="nav-link text-white" href="contacts.shtml" title="Contact Us"><i class="far fa-envelope"></i></a> </li>
</ul>
</div>
</nav>

Answer 1

Use a pseudo element to display the title attribute. Control when it should be displayed with a media query.
#media (max-width: 768px) {
.nav-link::after {
content: attr(title);
}
}
Example:
.navbar-dark {
background: hotpink;
}
.fas,
.far {
display: inline-block;
width: 20px;
height: 20px;
outline: 1px solid white;
}
#media (max-width: 768px) {
.nav-link::after {
content: attr(title);
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="/index.shtml"><img src="images/cardinal.png" width="80" alt="" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <i class="fas fa-home"></i> </li>
<li class="nav-item"> <a class="nav-link text-white" href="memberinfo.html" title="Members"><i class="fas fa-user-friends"></i></a> </li>
<li class="nav-item"> <a class="nav-link text-white" href="faq.shtml" title="FAQ"><i class="far fa-question-circle"></i></a> </li>
<li class="nav-item"> <a class="nav-link text-white" href="contacts.shtml" title="Contact Us"><i class="far fa-envelope"></i></a> </li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>