The icon's transition to text appears to be encountering challenges

I'm having an issue with adding a fade effect to the text on my icons in the navigation bar. I've almost got it working, but it keeps displaying "home" for each icon instead of the correct text. Can anyone help me fix this?

Live Example https://gyazo.com/1b9cd57d4b208686fe2c205eff9e21f8

HTML

<div id="nav_bar">

<a class="logo" rel="index" href="input.url">
  <img src="assets/img/logo.png">
  <img src="assets/img/logo.png">
</a>


<nav class=" en">
  <li><a rel="index" href="input.url" class="home-link active"><i class="fas fa-home fa-2x"></i></a></li>
  <li><a rel="about" href="input.url" class=""><i class="fas fa-user-alt fa-2x"></i></a></li>
  <li>
    <a rel="skills" href="input.url" class=""><i class="fas fa-cog fa-2x"></i></a>
  </li>
  <li><a rel="gallery" href="input.url" class=""><i class="fas fa-eye fa-2x"></i></a></li>
  <li><a rel="contact" href="input.url" class=""><i class="fas fa-envelope fa-2x"></i></a>
  </li>

</nav>

<li><a href="input.url" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="input.url" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="input.url" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="input.url" target="_blank"><i class="fa fa-rss"></i></a></li>

<a id="mobile-link" href="input.url"><i class="fa fa-bars"></i></a>

CSS The CSS code is too long to paste here so I've shared the link to the pastebin. Willing to compensate anyone who can resolve this issue :) https://pastebin.com/p1fwuuLt

javascripthtmlcss

Answer №1

It appears that more practice in CSS is needed, particularly understanding how selectors function.
You can either assign a class to each li element for selection or utilize the nth-child selector on the li (though not recommended).

#nav_bar {
  background: #181818;
  width: 60px;
  height: 100%;
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 3;
  min-height: 500px;
  list-style-type: none;
}

#nav_bar ul {
  margin: 0;
  padding: 0;
}

.lang {
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.lang a {
  display: block;
  margin-top: 5px;
  font-family: "Open Sans", "Helvetica", Arial, sans-serif;
  font-weight: 300;
  color: #A1A1A1;
}

.lang a:hover,
.lang a.active {
  color: #08ccfd;
}

.logo {
  background: #070707;
  display: block;
  padding: 8px 0;
}

.logo img {
  display: block;
  margin: 8px auto;
  width: 24px;
  height: auto;
}

#nav_bar nav {
  display: block;
  text-align: center;
}

#nav_bar nav a {
  font-size: 20px;
  color: #a5a5a5;
  margin-bottom: 15px;
  display: block;
  line-height: 51px;
  height: 51px;
  position: relative;
  text-decoration: none;
}

#nav_bar nav a i {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

#nav_bar nav a:hover i {
  opacity: 0;
}

#nav_bar nav a.active,
#nav_bar nav a:hover {
  color: #08ccfd;
}

#nav_bar nav a:after {
  content: '';
  font-size: 9px;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0px;
  display: block;
  width: 100%;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

#nav_bar nav li:nth-child(1) a:after {
  content: 'HOME';
}

#nav_bar nav li:nth-child(2) a:after {
  content: 'ABOUT';
}

#nav_bar nav li:nth-child(3) a:after {
  content: 'SKILLS';
}

#nav_bar nav li:nth-child(4) a:after {
  content: 'MY WORK';
}

#nav_bar nav li:nth-child(5) a:after {
  content: 'CONTACT';
}

#nav_bar nav.pl a:first-child:after {
  content: 'START';
}

#nav_bar nav.pl a:first-child+a:after {
  content: 'O MNIE';
}

#nav_bar nav.pl a:first-child+a+a:after {
  content: 'SKILSY';
}

#nav_bar nav.pl a:first-child+a+a+a:after {
  content: 'PORTFOLIO';
}

#nav_bar nav.pl a:first-child+a+a+a+a:after {
  content: 'KONTAKT';
}

#nav_bar nav a:hover:after {
  opacity: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<div id="nav_bar">

  <nav class=" en">
    <ul>
      <li><a rel="index" href="input.url" class="home-link active"><i class="fas fa-home fa-2x"></i></a></li>
      <li><a rel="about" href="input.url" class=""><i class="fas fa-user-alt fa-2x"></i></a></li>
      <li>
        <a rel="skills" href="input.url" class=""><i class="fas fa-cog fa-2x"></i></a>
      </li>
      <li><a rel="gallery" href="input.url" class=""><i class="fas fa-eye fa-2x"></i></a></li>
      <li><a rel="contact" href="input.url" class=""><i class="fas fa-envelope fa-2x"></i></a>
      </li>
    </ul>

  </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

Submit a list of checkboxes selected to Google Sheets separated by commas

Is there a way to modify the script I'm using to enter data from an HTML form into a Google Sheet so that my checkbox fields will be entered as a list, separated by commas? If all boxes were checked in the example form below, I would like the cell fo ...

javascripthtmlformsgoogle-apps-scriptcheckbox

Using PHP to pass values from a MySQL database to JavaScript

hello, $i=0; while($row = $result->fetch_assoc()) { echo " <tr><td>".$row["Number"]."</td><td>".$row["MusikName"]." ".$row["MusikURL"]."</td></tr>"; This portion is successful...it displays -&g ...

javascriptphpmysql

The outcome of Contains function is coming back as negative

Recently, I was working on a project that I cloned from GIT, which involved a bot. However, I encountered an issue where the 'contains' function used by the bot was not functioning properly. After conducting some research using Google, I discove ...

javascriptarraysnode.jsnpmcontains

The error message "Property 'destroy' of undefined cannot be read in DataTables"

I need to develop a function that can create a new DataTable. If there is an existing table, I want the function to first destroy it and then create the new one. This is what I have so far: $.ajax().done(function(response){ Init_DT(response[& ...

javascriptjqueryajaxdatatables

Executing multiple operations with Graphql mutations

I am faced with a situation where I have 3 mutations to execute with 6 input parameters each. I need to send a mutation based on the value of certain status variables. How can I achieve this efficiently? mutation updateProfile( $input: UpdateProfileMuta ...

javascriptreactjsgraphqlapollo-clientmutation

Display the accurate duration based on the dates selected in an HTML form automatically

If someone has office hours on Monday, Wednesday, and Friday from 7:00 am to 7:00 pm, and on Tuesday and Thursday from 10:00 am to 9:00 pm, the dropdown menu should display only the timings of 7:00 AM to 7:00 PM if the selected date is a Monday, Wednesda ...

javascriptjqueryhtml

Is the jQuery AJAX call using POST method being retrieved as $_GET?

Below is a snippet of code that I've successfully implemented: <script type="text/javascript"> $(document).ready(function() { // Initializing the table $('#table_1').tableDnD({ onDrop: function(table, row) { $.tab ...

phpjavascriptjqueryajax

Steps to set up a MessageCollector on a direct message channel

Hey everyone, does anyone have any tips on setting up the message.channel.createMessageCollector function for a direct message? I attempted to use message.author.dmChannel.createMessageCollector but it didn't work for me. Any advice? ...

javascriptdiscorddiscord.js

Block with vertical text covering entire height

I need to place an additional block with 100% height and vertical text (bottom-to-top direction) inside a variable height block, aligning it to the left side without using width and height calculations in JS. Is there a way to achieve this using CSS transf ...

htmlcsscss-transformsvertical-text

Issue with Bootstrap jQuery dynamic table edit/delete/view button functionality not functioning as expected

Could really use some assistance with this issue. I have a DataTable that includes a button in the last column which offers options like Edit/Delete/View. When clicked, it should delete the entire row. However, I'm struggling to access the current ele ...

javascriptjqueryhtmlbootstrap-tabledynamic-tables

CSS styles are not being applied correctly to the Bootstrap modal in combination with Leaflet

After importing leaflet-bootstrapmodal.js into my project, I am facing an issue with styling it. Take a look at the plugins listed below: <!-- Bootstrap modal--> <link rel="stylesheet" href="bootstrap-modal/bootstrap ...

javascripthtmlcssbootstrap-4leaflet

JQuery button.click() handler executes without a user click

Currently, I am in the process of tidying up the code for my auction game. However, I have encountered an issue where my function is triggered immediately after endAuction() is called rather than waiting for the button click event. Unfortunately, I am no ...

javascriptjqueryclick

Attempting to utilize ng-click on an element that has been added using element.append() in the postlink phase?

I have been working on customizing a particular angular library to incorporate some new features. https://github.com/southdesign/angular-coverflow/blob/master/coverflow.js As part of this process, I am looking to attach click events to the elements being g ...

javascriptangularjs

Can you explain the significance of the sequential statements on JavaScript?

Can someone help me decipher this code snippet I came across? require('happy module') .login('storage', { id:7, type:'foo' })(a, b, function c (err) { return err }); 1) The require('happymodule') function takes ...

javascriptnode.jscommonjs

What are some ways I can ensure that my personalized bootstrap navbar adjusts to different viewport sizes?

I've created a custom navbar that fits perfectly on a screen that is 1300 pixels wide by 700 pixels high. https://i.sstatic.net/nOm0c.png However, when the viewport size is reduced, the navbar elements become misaligned: https://i.sstatic.net/zBqpQ ...

htmlcssbootstrap-4

Can the value of an object parameter be inserted dynamically?

I've been racking my brain over this, but so far I haven't found a solution that fits my exact issue. My query is about the feasibility of entering a value for an object parameter from an input box dynamically? For instance: <form name= ...

javascripthtml

Can you summarize HTML DOM and jQuery DOM in a single sentence?

I've encountered a challenge while working on my Javascript code with a HTML5 canvas and jQuery. I am currently using getElementById to access the canvas and $('canvas') to apply a jQuery function to it. The issue arises when I realize that ...

javascriptjqueryhtmlcanvas

"Modify the CSS color of h1 based on the presence of a specific class containing spaces in a div

I am currently attempting to modify the color of a heading by referencing a specific div's class. My attempts so far include: .pagetitle-title.heading { color: purple; } <div class="container"> <h1 class="pagetitle-title heading">I ...

htmlcsswordpress

How can I adjust the font size of information retrieved from a JSON file using ng2-smart-table?

I recently tried using the following CSS code: :host /deep/ ng2-smart-table {font-size:22px;} However, despite implementing this code, I have not noticed any change in the font size. ...

cssangular

Obtaining the initial variable from an array - a simple guide

Although it seems simple, I am having trouble getting it to work. I have an array with 2 variables inside that I retrieve from jQuery. var features = [long, lat ] I want to iterate through all the values in the loop and use: fetures[i] This should give ...

javascriptjqueryarraysvector