When a page is changed, the Vue.js Active Menu color remains enabled

Check out my website at . I want to customize the navigation bar so that only the active page's navbar li is colored in red.

 <div class="navigation-items">
    <ul class="nav-list">
      <li class="nav-item"><nuxt-link to="/en" class="nav-link">Home</nuxt-link></li>
      <li class="nav-item"><nuxt-link to="/en/about" class="nav-link">About Us</nuxt-link></li>
      <li class="nav-item"><nuxt-link to="/en/courses" class="nav-link">Courses</nuxt-link></li>
      <li class="nav-item"><nuxt-link to="/en/meetups" class="nav-link">Meetups</nuxt-link></li>
      <li class="nav-item"><nuxt-link to="/en/contact" class="nav-link">Contact Us</nuxt-link></li>           
    </ul>
  </div>

Here is the corresponding CSS code:

.nav-item a:hover,
.nav-item a:active,
.nav-item a.nuxt-link-active {
  color: red;
}

Currently, the home page nav item stays illuminated even when on a different page. How can I have only the active page's nav item highlighted?

Thank you!

javascriptcsstwitter-bootstrapvue.jsnuxt.js

Answer №1

Make sure to include the word precise in your router link. This will help resolve any issues you are experiencing.

<li class="nav-item"><nuxt-link to="/en" precise class="nav-link">Home</nuxt-link></li>

You can explore all available attributes for <nuxt-link> by visiting: https://router.vuejs.org/en/api/router-link.html

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

Unable to delete data in Laravel 8

I am new to Laravel and facing an issue when trying to delete a row with a modal. The problem is that only the first row is getting removed and I can't figure out the reason. Here is my modal setup: <p class="card-text"><small clas ...

javascripthtmllaravel

Using a URL in an AJAX request

Before redirecting to another page, I am storing data from a textbox. When the user clicks the back button on the page load function in JavaScript, I retrieve the data from the textbox using: var pageval = $('#grid') .load('/Dealer/AllClai ...

javascriptajaxjquery

Efficiently and consistently refreshing the DOM with information while maintaining page integrity

I'm currently developing a Single Page Application (SPA) that utilizes AJAX to dynamically load content into a specific div. The layout consists of a side accordion menu, where clicking on an item loads relevant information in a neighboring div. Howev ...

javascriptjqueryajaxsingle-page-application

I'm having trouble with my Discord app command. Every time I try to use it, I keep getting the error messages "The application did not respond" and "Dispatching MESSAGE_SEND_FAILED." How

Having a good amount of experience in JavaScript, I was optimistic about developing a Discord application as it seemed quite manageable. Eventually, I successfully integrated the bot into a server and implemented a command that is now listed in Discord&apo ...

javascriptnode.jsdiscorddiscord.js

The HTML select element fails to drop down over the THREE.js scene

I'm currently working on enhancing the Three.js editor for a project. editor link One of the tasks I'm tackling is adding a select element on top of the viewport in the editor. Unfortunately, the dropdown functionality of the select element isn ...

javascripthtmldrop-down-menuthree.js

Is there a way to iterate through two arrays simultaneously in React components?

Recently delving into the world of React, I am utilizing json placeholder along with axios to fetch data. Within my state, I have organized two arrays: one for posts and another for images. state = { posts : [], images : [] ...

javascriptreactjsreact-redux

Getting the response data from an XMLHttpRequest - Full guide with screenshots

Currently, I am working with autocomplete jQueryUI and have this code snippet: .autocomplete({ source: function( request, response ) { var results = $.getJSON( url, { term: extractLast( request.term ) }, response ); console.log(results); ...

javascriptjqueryajaxxmlhttprequestresponse

javascript: extracting class name from HTML elements

To extract class names from an HTML code using JavaScript, I can utilize the following method: var cPattern = new RegExp(/class[ \t]*=[ \t]*"[^"]+"/g); var cMatches = data.match(cPattern); However, the above code returns an array with values li ...

javascriptnode.js

What steps should I follow to create a cohesive background design using CSS?

https://i.sstatic.net/e3LYL.png Is there a way to combine two separate div elements in CSS? Currently, the image Row and col are not connected to the above SVG blob. How can I utilize the blob as a background? Based on the code provided below, they appear ...

css

The React application is unable to communicate with my Express application in a production environment, despite functioning properly during development

Currently, I am attempting to make a basic get request to my express backend located at mywebsite.com/test. The expected response from the server should be {"test": "test"}. While this is working perfectly fine in development on localho ...

javascriptnode.jsreactjsexpressvps

The input value remains a string even after it has been converted to a float

I can't figure out where I'm going wrong. I'm attempting a simple task: getting user input, converting it to a float, and performing a calculation with that value. However, all I keep getting is NaN. Here's the input (I normally replac ...

javascriptjquery

Mastering the use of SVG icons in Angular 4+: A comprehensive guide

I have an icon.svg file with a collection of icons that I would like to use in my app, similar to how we display material icons. Does anyone have any ideas on how to include the file in the app and use these icons? I've tried looking for solutions a ...

cssangularsvg

What is the procedure to modify a CSS class from the code-behind file?

So I have a CSS style in my .css class where the color is set to blue for hundreds of buttons. But now, my customer wants an option for green buttons which will be saved by a database field. So I check the field like this: if (!String.Is ...

asp.netcss

Use custom styles or CSS for the file input element: <input type="file">

Can CSS be used to achieve consistent styling for <input type="file"> in all browsers? ...

htmlcssfile-io

Executing JQuery asynchronous calls sequentially

Recently delving into the world of Jquery, I've encountered a coding challenge: my code loops through an array and retrieves HTML from an ajax request for each iteration. $.each(arr, function (data) { $.get('/Quote/LoadQuoteItemCost', { ...

javascriptjquery

Creating styles for different screen sizes including mobile devices, low-resolution desktops, and high-resolution desktops

One of the techniques I'm using involves analyzing both the horizontal and vertical screen dimensions to differentiate between mobile devices and desktops, as well as distinguish high-resolution from low-resolution desktop displays. In order to achie ...

htmlcssmobile

Trouble implementing array filter in React component is a common issue

Hello everyone! I'm facing an issue with deleting an element from my useState array. I have the index of the element that I want to remove, and I've tried the following code snippet: const updatedArray = myArray.filter((item: any, index: number) ...

javascriptreactjsarraystypescriptnext.js

Exploring tailored markup features in Next.js version 13

I am trying to optimize my website for social media sharing on platforms like WhatsApp. I have been experimenting with different methods to set custom markup in Next.js 13, but haven't achieved the desired outcome yet. Your help and insight are greatl ...

javascriptreactjsnext.jsnext.js13nextjs-image

Ways to implement a fixed navigation bar beneath the primary navbar using ReactJS

Utilizing ReactJS, I am endeavoring to create a secondary (smaller) navbar in the same style as Airtable's product page. My primary navbar is situated at the top and transitions from transparent to dark when scrolled. The secondary bar (highlighted in ...

javascriptreactjsmaterial-ui

My goal is to use both jQuery and PHP to automatically populate the dropdown list

Here is my PHP code for executing a query: $host = "localhost"; $user = "root"; $pass = "abc123"; $databaseName = "class"; $con = mysql_connect($host,$user,$pass); $dbs = mysql_select_db($databaseName, $con); $result = mysql_qu ...

javascriptphpjqueryjsonajax