Display title of link in mobile navigation menu

I would like to incorporate icons in my navbar instead of text, with the option for the title to be displayed on hover. The "title" text currently displays correctly on both mobile and desktop versions. However, on mobile display, I want the title text to be shown next to the icons automatically without requiring a hover. The code below currently shows the icons (with titles) only when hovering over a menu item, but I am looking to have the title displayed alongside the icons when the hamburger menu is open on mobile devices.

<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"> <a href="index.shtml" class="nav-link text-white" title="Home"><i class="fas fa-home"></i></a> </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>
htmlcssbootstrap-4

Answer №1

Utilize a pseudo element to showcase the title attribute. Manage its display using a media query.

@media (max-width: 768px) {
  .nav-link::after {
    content: attr(title);
  }
}

For 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"> <a href="index.shtml" class="nav-link text-white" title="Home"><i class="fas fa-home"></i></a> </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>

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

Bootstrap 4's Datetime picker not appearing as expected

I'm currently facing an issue with integrating the EONASDAN datetime picker form into my Bootstrap v4 webpage. The GET form I have contains a lot of data to be submitted. In the demo page provided below, I want users to make selections in each text ...

javascriptjqueryhtmldatetimebootstrap-4

Insert a new row into the table using jQuery right above the button

I am working on a table where I need to dynamically add rows in the same rowId upon clicking a specific button. For instance, when the "Add Row 1" button is clicked, a new row should be added under "Some content 1", and so on for other rows. <table i ...

javascriptjqueryhtml

The 502 Bad Gateway error strikes again on Google Drive

I have a website with numerous photos stored on Google Drive. The image tags in my code look like this: <img src="https://googledrive.com/host/<foldId>/A14.jpg"> Unfortunately, many of the photos are not loading and instead showing a 502 Bad ...

htmlgoogle-drive-api

Executing the command in the Windows Command Prompt by utilizing an HTML button

When a button on my HTML page is clicked, I want to execute the command python abc.py in the Windows command prompt. The python file is stored at C:/abc.py. I'm looking for guidance on how to code the HTML page to achieve this functionality. Any assis ...

htmlwindowspython-2.7commandcommand-prompt

Avoid importing the React CSS style file at all costs

Currently, I am working on a project and facing a minor issue related to importing the style.css file. I am aware that the syntax should be import "./style.css", however, upon implementation, I encountered a Terminal Output error. The output generated by ...

cssreactjs

- Bullet point: Table heading alignment variation

When it comes to centering a <th> element inside an <li>, different browsers have different approaches. In Internet Explorer, Edge, and Safari, the <th> is center-justified. However, in Chrome, Firefox, and Opera, it's left-justifie ...

csshtmlcross-browser

Unable to understand the reason behind why the button is not being displayed

I'm having trouble with my quiz app. I have a button to submit answers and move on to the next question, but whenever I try to place it within the div that contains the quiz, the button disappears. Can someone please help me figure out what's wro ...

javascriptjqueryhtmlcss

Tips on automatically populating a textbox without the need for a button click

I am currently using the following code: <input type="text" value="<?php echo empty($this->session->store['actual_info']['actual_total_marketing_budget']) ? '' : $this->session->store['actual_info' ...

javascripthtml

Ajax insertion was successful, but the database records are empty

Why is my code able to save data to the database using Ajax, but all rows are empty? Here is My Form: <form name="frm" id="frm" action=""> <div class="form-group"> <label for="namaproduk">Product Name</label> <input t ...

javascriptphphtmlajaxcodeigniter

Adjusting the size of the snap increments

When using gridstack, I have the ability to resize my widgets. However, I've noticed that when dragging on the widgets' handles, they snap to specific sizes, which seems to be a fixed amount. If I wanted to set the widget's size to something ...

javascriptcssgridstack

Ways to Utilize CSS for Substituting Text

Is there a way to change Type： to Class： using CSS? <span class="skills">Type：<a href="....../type/aaa/">aaa</a>, <a href="...../type/bbb/">bbb</a></span> ...

htmlcss

Guide to changing the size of an image window in CSS when the container's width falls below a specific threshold

I am struggling with a dilemma regarding an image that is 1920 pixels wide. My goal is to have it displayed centered and cropped in the browser window when its width exceeds 1024 pixels. In case the browser width is below 1024 pixels, I want the image to b ...

htmlcssimage

to invoke a jQuery function located on a different webpage

Imagine you have two web pages: hello.html and wow.html. hello.html contains the following script: <script> $(document).ready(function() { $( "#loader" ).load( "wow.html"); }); </script> while wow.html includes this jQuery function: $(fun ...

jqueryhtmlajax

Creating a Dynamic Bar in Your Shiny Application: A Step-by-Step Guide

Currently, I am developing a unique crowd funding shiny app to monitor donation amounts. Is there a method available that allows for the creation of a reactive bar in Shiny? Alternatively, is it feasible to achieve this using html, css, and javascript? He ...

javascripthtmlshinyshinyjs

css - aligning text below another text in the center

Looking to style a text in a specific color with a message about another text below it? Want the text centered but not sure how to position it correctly? margin: 0px auto; If this code isn't delivering the desired result and is positioning your text ...

csscenter

The Iframe on the webpage is automatically refreshing once a submission is made, which is not a feature present in the original version of

Within my newsletter.html file, I have set up a newsletter where users can submit their email addresses, which are then stored in my JSON file. In homepage.html, I embedded an iframe from the newsletter.html file. Everything seems to be working fine, exce ...

javascripthtmliframe

Display the code exactly as it appears

Important Note: I have to insert the following code three times in the HTML body of a static webpage. Instead of repeating it multiple times and cluttering the code, I prefer to have a single line (repeated three times) that calls the function to output th ...

phphtmlescaping

The back-to-top button guides users back to their last visited page

I'm excited to explore AngularJS and I want to add two "return to top" buttons on different pages. Here's what I have so far: Page 1: <h1 id = "top"> .......... <a href="#top" target = "_self">Return to Top</a> Page ...

javascripthtmlangularjsangularjs-scopehref

Issue with SVG on tainted canvas causes IE security error when using toDataURL

In my Angular JS directive, I have implemented a feature to export SVGs to PNG. While this functionality works seamlessly in most browsers, it encounters a security error in IE. Despite my numerous attempts to troubleshoot the issue, I have been unable to ...

javascriptangularjshtmlcanvassvg

Implementing a permanent class following an incident

Is it possible to dynamically add a class to an element when an event occurs rather than based on a condition? For example, I have a td that displays a variable. <td>{{myVar}}</td>//myVar=10 When the variable changes to myVar=15, I want to ad ...

javascripthtmlangularjs