Is there a way to style the nav-item element specifically on the current page I'm viewing?

I'm just starting out with Vue.js and Nuxt and I need some guidance on how to apply a background image (blue line at the top of items) only to my active page (such as the contact page).

https://i.sstatic.net/maDzc.png

This is the HTML code I am using :

<b-navbar-nav class="text">
    <b-nav-item to="/">HOME</b-nav-item>
    <b-nav-item href="/#">ARTICLES</b-nav-item>
    <b-nav-item href="#">MAP</b-nav-item>
    <b-nav-item to="/about">TEAM</b-nav-item>
    <b-nav-item to="/contact">CONTACT</b-nav-item>
  </b-navbar-nav>

Here is my CSS code :

https://i.sstatic.net/GTQ10.png

Can anyone offer assistance with this? Thank you!

htmlcssvue.jsnuxt.jsbootstrap-vue

Answer №1

Instead of applying the image styles to all nav items using the nav-link class, you can utilize the nuxt-link-active class to set the styles on the active nav item specifically.

By default, the nuxt-link-active class is automatically applied when using Nuxt.js. Additionally, you have the option to assign a custom CSS class to the active nav item. For more information, refer to the documentation available here.

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

Utilize Vue.js methods to reverse the string within a paragraph using the appropriate function

Hello everyone, I've been attempting to implement a function to reverse a string within a paragraph text in vue.js. I've created a method called reverseword to reverse the words and added it to a card using :rule="reverseword()", but un ...

javascriptvue.js

Tips for centering text inside a div using a separator

During my side project, I decided to use the angular material divider but encountered issues with aligning the text correctly. https://i.stack.imgur.com/zg1mu.png The problem can be seen in the image provided - the text on the right side is not aligned b ...

htmlcssangularangular-material

When the React-bootstrap Popover arrow is oriented vertically, the arrow colors appear to be inverted compared to when it

Utilizing a react-bootstrap Popover component, I have implemented custom styling for the arrow with a gray color and 50% opacity. The CSS code that enables this customization is as shown below: .popover .popover-arrow::before, .popover .popover-arrow::afte ...

cssreactjsbootstrap-5

Trouble with Div Alignment in Web Browsers: Firefox vs. Google Chrome

I have encountered an issue with the layout of my website when using the Div element. While it appears correctly in Internet Explorer, the display gets distorted in Firefox and Google Chrome when the div is expanded. I have searched online for solutions b ...

asp.nethtmlcross-browser

adjusting the background with repeat-y pattern placement

I'm having an issue with setting a background image as a wrapper for the main content of my page. Currently, I've set the background image like this: #background { background: url("../image/bg.png") repeat-y 133px 50px; color: #000000; ...

cssbackground-image

Utilizing jQuery and CSS to make an entire div clickable, and activate an 'a' tag hover state upon hovering

Looking to create a clickable link for the .wrapper div that directs users to the location of a.icon. Want the .wrapper div to activate the a.icon:hover state when hovered over, not just when hovering over the icon itself. Any assistance would be highly a ...

javascriptjquerycss

Unable to Pause Video with Javascript

I have a project with a video that plays in a continuous loop. Below is the HTML code for the video tag: <video playsinline autoplay muted loop id="myVid"> <source src="River.mp4" type="video/mp4"> </video> My goal is to make the vi ...

javascripthtmlvideopause

What is the best way to ensure that my cards maintain consistent proportions?

My cards are not maintaining their proportions, causing buttons to pop out of the card and the card dimensions changing. I realize this issue is due to using fixed width and height in combination with flex. I'm struggling to find the best solution to ...

htmlcss

When using ReactJS, hovering over a row in a table should trigger a change in the background color of the corresponding row in another table with the same index

I need to create a feature where hovering over a row in the first table will highlight a corresponding row in the second table. The highlighting should be based on the index of the hovered row. Here is an example: <div> <table> < ...

javascriptcssreactjsstyled-components

What is the process for choosing a particular input element based on its size and type?

Among my pair of sets containing input type=text elements, each group is uniquely styled through CSS. In the first set, the length adjusts based on CSS using the width property. Conversely, in the second set, the size attribute determines the length of the ...

htmlcss

Ways to deactivate a text area or mat-form-field

I need assistance with disabling a form field using Angular (4) + Angular Material and Reactive Forms. I have tried searching for syntax options like disabled="true", but haven't found the correct one yet. Can you please provide me with the right synt ...

htmlangularangular-material

How come the dropdown menu consistently disrupts my CSS design?

Whenever I add a dropdown menu, my CSS layout gets all messed up. Can someone please explain why this happens and how to fix it? Below is the code snippet: <asp:Label ID="projnamelbl" runat="server" CssClass="editlabels" Text="Project Name"></as ...

c#asp.netcss

Exploring the ways to access inner contents of a Div element using ajax

Looking to update the SQL database with a list of variables sent from an HTML page. Some data is being sent correctly, while others are not. The list is placed in a div divided into two parts: "h1" and another "div". The header data is being sent correctly ...

htmlsqlajaxjson

Utilizing the Jquery hover feature to reveal or conceal an element

My Hover function is designed to display and hide sub menus when a person hovers on them. The issue I'm facing is that the menu disappears when I move the mouse down towards it. Can someone help me identify what I am doing wrong here? ...

javascriptjqueryhtmlcss

Is it wise to use the<sup>attribute for mandatory form fields?

Would it be wise to utilize the <sup> tag instead of using margin-top: -xnumberofpx for indicating required fields in a form? <label for="address1" required>Address line 1<sup><img src="/src/images/requiredAsterix.png" width="10" heig ...

csshtmlaccessibility

Issues with CSS rendering font in a suboptimal way

Whenever I set a simple font rule for my text, the output is not displayed correctly and appears blurry. The font looks fine in Mozilla Aurora browser but displays poorly in newer versions of Google Chrome and Firefox. Does anyone know why this happens? I ...

csswebfonts

Ways to bypass HostListener in Angular 2

In the process of developing a page with animations triggered on scroll, I encountered the challenge of ensuring that the animations only occur when the corresponding element is visible on the viewport. Utilizing Angular2 for this task led me to investigat ...

javascripthtmlangulartypescriptangular2-template

The presence of an unfamiliar custom element, specifically <v-btn>, was detected following the installation of V

I can't figure out why my code isn't functioning properly. I have created a file at src/plugins/vuetify.ts with the following content: import Vue from "vue"; import Vuetify from "vuetify/lib"; Vue.use(Vuetify); const vuetify ...

vue.jsvuetify.js

What is the process for converting x and y coordinates to align with a fixed display?

When I make an API call, I am receiving X and Y coordinates in the following format: x: "-0.0120956897735595703" y: "0.147876381874084473" To display these coordinates on my minimap images, I have set their display to be absolute. The "left" and "top" pr ...

javascripthtmlcssreactjsmath

Tips for ensuring your anchor links function properly with Ajax interactions

I have been working on transferring data from a MySQL database using AJAX with JSON as the datatype. Below is the code I've used: $("#klik_cari").click(function() { //ajax configuration $.ajax({ url: "<?php echo ...

jqueryhtmljsonajax