I'm having trouble figuring out how to activate the active state for a navigation bar

Having trouble changing the icons' state when they are clicked on. This navigation bar is being imported from different files.
Here is my code for the navigation bar:

.nav {
  position: fixed;
  top: 88%;
  left: 12.5%;
  right: 12.5%;
  width: 75%;
  bottom: 25px;
  color: #70AD47;
  height: 80px;
  background: #eee;
  box-shadow: 0 0 15px #ccc;
  display: flex;
  overflow-x: auto;
  border-radius: 10px;
}

.nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-width: 50px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  color: #444444;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s ease-in-out;
}

.nav__link:hover:not(.active) {
  background-color: #eeeeee;
}

.nav__link:active {
  color: #70AD47;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav class="nav">
  <a href="assignment.php" class="nav__link">
    <i class="material-icons nav__icon ">co_present</i>
    <span class="nav__text">Conferene Room</span>
  </a>
  <a href="archive.php" class="nav__link ">
    <i class="material-icons nav__icon">folder</i>
    <span class="nav__text">Archive</span>
  </a>
  <a href="classroom.php" class="nav__link">
    <i class="material-icons nav__icon">home</i>
    <span class="nav__text">Home</span>
  </a>
  <a href="assignment.php" class="nav__link">
    <i class="material-icons nav__icon">assignment</i>
    <span class="nav__text">Assignment</span>
  </a>
  <a href="discussion.php" class="nav__link">
    <i class="material-icons nav__icon">question_answer</i>
    <span class="nav__text">Defense Discussion</span>
  </a>
</nav>

htmlcss

Answer №1

To achieve this, JavaScript or jQuery can be utilized. Additionally, a comment was added to your .nav__link:active in the CSS as it is not being used.

style10.css:

.nav {
    position: fixed;
    top: 88%;
     ...
}

.active {
    color: #70AD47;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack10</title>;

   ...

</body>
</html>

Demo here:

...

.nav {
    position: fixed;
    top: 88%;
     ...
}

.active {
    color: #70AD47;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack10</title>

   ...

</body>

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

Exploring the Versatility of Axios

Today, I implemented an AJAX request using Axios in JavaScript to submit form data. While the requests are being sent successfully, it seems that the backend is not able to receive the username and password information from the frontend. What could be ca ...

javascriptphphtml

Can the floated DIVs be prevented from breaking onto a new line if they exceed the container's width?

Take a look at this sample HTML code: <div id="container" style=""> <div id="left" style="float: left; width: 200px;">...</div> <div id="right" style="float: right; width: 100px;">...</div> </div> How can we prevent ...

htmlcss

The li::before pseudo element isn't working properly

I am having issues with my UL list where the CSS class I applied is not affecting the li::before pseudo class. Here's the HTML: <ul class="my-ul"> <li>Item 1</li> <li>Item 2</li> </ul> This is the CSS I a ...

htmlcsspseudo-element

Adding Text Above a Material Icon in Angular: A Guide

Here is some sample HTML code to consider: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <mat-icon class="fa fa-folder" style="font-size:48px;"><span style="color: re ...

htmlcssangulariconsmat

Safari not rendering SVG wave at full width reached

My SVG isn't scaling to 100% width in Safari like it is in IE, Chrome, and Firefox. Despite numerous attempts, I haven't been able to make my SVG stretch across the full width like it does in other browsers. The project is built using React. . ...

htmlcsssvg

Easily remove data using jQuery

$("#results").after(data) In my code snippet above, I am using jQuery to add some database results after a DIV element with the ID "results" whenever a button is clicked. The issue I am facing is that each time the button is clicked, new results are added ...

javascriptjqueryhtmlajax

The sticky navigation bar's background fails to change at the appropriate time following an image slider

I am currently facing an issue with my sticky navigation bar. I want the background color to change to white after the user scrolls past the image slider. The problem is that the white background appears above the image slider instead of in the orange logo ...

jqueryhtmlcss

What is the best way to duplicate and delete the final child element using jQuery?

Can someone help me troubleshoot this code that is supposed to clone and remove the last child of a ul element? It doesn't seem to be working as expected. $(document).ready(function () { var tmp1 = ''; var tmp = '<ul>< ...

javascriptjqueryhtml

Unable to display a recursive component with Vue3 CDN

I am currently working on a project using Vue3 CDN because the project environment cannot run npm. I have been trying to create a component with html+CDN, but when attempting to create a recursive component, it only renders the top-level element. Is there ...

javascripthtmlvue.jsvuejs3

Exploring the Features of Bottom and Right in jQuery

Here is a snippet of jQuery code that I included in a sample program: $('#left').click(function(){ $('.box').animate({ left: "-=40px", }, function(){/* End of Animation*/}); }); $('#right ...

jquerycss

Integrating dynamic PHP echo strings from a database into an established CSS layout

I am currently exploring PHP and MySQL databases, and I have managed to develop a basic search engine for my website. However, I am facing an issue that I am struggling to resolve: Is there a way to integrate the PHP echo output (search results) into the ...

phphtmlmysqlcss

Alignment of the button in a vertical position

Hey there! I've got a button set up with Bootstrap for centering, but now I'm looking to vertically align it in the middle of the page without any margin or padding. Any ideas on how to go about doing that? Here's the HTML code: <div cl ...

htmlcssbootstrap-4

What methods can be used in CSS to create this specific design using only two images?

Searching for a way to display two images side by side on a webpage with specific criteria. 1) Final look should resemble this: https://i.sstatic.net/XA8V3.jpg 2) Both images must be clickable links (e.g. mysite1.html and mysite2.html) 3) Both images ...

javascriptcssimage

Ensure that all panels are set to the same width as the widest panel

Is there a way to make all the panels in my jQuery tabs have the same width as the widest panel? I know that heightStyle:"auto" works for adjusting the height, but is there a similar option like widthStyle:"auto"? I want to show you the current look compa ...

htmlcssjquery-uijquery-ui-tabs

Adding a <span> element within an <h1> tag in WordPress

I am attempting to create this layout in Wordpress using the code <h1>This is my <span>title</span></h1>, but I am unsure how to incorporate a <span> tag within the <?php the_title(); ?> function. After consulting the c ...

phphtmlcsswordpress

AngularJS - How to Deactivate List Items

Currently, I am working on developing a breadcrumb navigation system using AngularJS. However, I am facing an issue where some of the links need to be disabled based on certain user requirements not being met. After researching the Angular documentation, ...

htmlangularjslistitemangularjs-ng-disabled

Concealing specific items in the dropdown choices with AngularJS

My goal is to assign two crews using the data retrieved from the server. When I choose an item in one drop-down menu, I want that option to be removed from the next drop-down menu. ...

htmlangularjs

The waveform's bottom appears distorted when using Bootstrap

I'm currently experimenting with creating a header wave in Bootstrap CSS using SVG shape. However, I encountered an issue when implementing bootstrap into the HTML code - my design resembles the second image instead of the desired look of the first on ...

htmlcsstwitter-bootstrapsvg

Sharing data with external domains and retrieving HTML output using JavaScript

When a browser sends a POST request and expects an HTML page result from JavaScript, problems arise if there is no Access-Control-Allow-Origin in the server response. Unfortunately, changing anything on the server side is not an option. If a human clicks ...

javascriptjqueryhtmlasp.netajax

How can I set a value using document.getElementById(idPopUPImage).innerHTML to create a static popup in Leaflet?

I added a leaflet map to my project which you can find on Codpen In the map, I've included a button key that displays an image in a popup when clicked. However, after closing the popup and reopening it, the image doesn't show unless I click the ...

javascripthtmlpopupleaflet