I'm not sure what the issue is with my navbar animation not functioning properly

My navbar has been styled with a transition that should ease in and out, but for some reason it's not working as expected. Even when I hover over the li a elements, the ease-in-out animation is not displaying, and I'm struggling to figure out what I've done wrong.

body {
  margin: 0;
}

.nav-bar {
  width: 100vw;
  background-color: black;
}

.nav-bar-ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1em 0;
}

li a {
  text-decoration: none;
  color: white;
  padding-right: 3em;
  position: relative;
}

li a::after {
  content: '';
  position: absolute;
  display: block;
  height: 0.4em;
  width: 0%;
  background-color: white;
  bottom: -1em;
  transition: all ease-in-out 250ms;
}

li a :hover::after {
  width: 60%;
}

li a:hover {
  color: white;
}
<div>
  <div className="nav-bar">
    <ul className="nav-bar-ul">
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
    </ul>
  </div>
</div>

htmlcss

Answer №1

In the given example, you may not see any changes as all colors are white. To demonstrate, I have added some colors - green for the <a> and red for the ::after.

There are two issues to address:

Issue One - Typo in the :hover selector:
The space between a and :hover selectors is incorrect.
li a :hover::after
--------^
Remove the space for the hover effect to work correctly. li a:hover::after

Issue Two - 60% width of an invisible element:
When hovering over the <a> element, you are increasing the width of the ::after element from 0% to 60%, but based on what? By default, your link has display: inline, so the width of the after element remains 0. Therefore, set your link to display: inline-block or display: block to resolve this issue.

body {
  margin: 0;
}

.nav-bar {
  width: 100vw;
  background-color: black;
}

.nav-bar-ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1em 0;
}

li a {
  text-decoration: none;
  color: green;
  padding-right: 3em;
  position: relative;
  display: inline-block;
}

li a::after {
  content: '';
  position: absolute;
  display: block;
  height: 0.4em;
  width: 0%;
  background-color: red;
  bottom: -1em;
  transition: all ease-in-out 250ms;
}

li a:hover::after {
  width: 60%;
}

li a:hover {
  color: white;
}
<div>
  <div className="nav-bar">
    <ul className="nav-bar-ul">
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
    </ul>
  </div>
</div>

Answer №2

    <style>
body {
  margin: 0;
}
.nav-bar {
  width: 100vw;
  background-color: black;
}
.nav-bar-ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1em 0;
}

li a {
  text-decoration: none;
  color: white;
  padding-right: 3em;
  position: relative;
}

li a::after {
  content: '';
  position: absolute;
  display: block;
  height: 0.4em;
  width: 0%;
  background-color: white;
  bottom: -1em;
  transition: all ease-in-out 250ms;
}

li a:hover::after {
  width: 60%;
}

li>a:hover {
  color: white;
}
</style>
<body>
<div>
  <div class="nav-bar">
    <ul class="nav-bar-ul">
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
    </ul>
  </div>
</div>
</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

Implementing HTML page authentication with Identity ADFS URL through JavaScript

I have a basic HTML page that displays customer reports using a JavaScript function. The JavaScript makes an ajax call to retrieve the reports from a backend Spring REST API. In the Spring REST API, I have set up an endpoint "/api/saml" for authentication ...

javascripthtmljqueryjquery-pluginsadfs

Gather information that is dynamic upon the selection of a "li" option using Python Selenium

I need to extract data from this website (disregard the Hebrew text). To begin, I must choose one of the options from the initial dropdown menu below: https://i.stack.imgur.com/qvIyN.png Next, click the designated button: https://i.stack.imgur.com/THb ...

pythonhtmlseleniumweb-scrapingscreen-scraping

Create a list of items that are enclosed within a parent element

My menu is generated from a php query and the output is as follows: #ultra-menu { width: 92%; background-color: rgba(255, 255, 255, 0.90); position: absolute; left: 0px; right: 0px; margin: auto; border-radius: 35px; max-height: 300px; ...

htmlcss

What is the reason for the ID "home-ad" not functioning properly in Firefox?

While working on some CSS styling, I encountered an issue with the ID "home-ad" not displaying properly in Firefox. The box model was showing a content size of 0x-40 (with 40 being the padding value). Interestingly, when I changed the ID name, the code wor ...

htmlcssfirefox

Transmit data from the Windows Communication Foundation to JavaScript

Looking to invoke the WCF service through JavaScript, utilizing AJAX? Check out this resource: Calling WCF Services using jQuery Here's my query: Is there a method to retain some JavaScript-related data after making a request, and then transmit inf ...

javascriptajaxhtmlwcfservice

Want to learn how to create a draggable uploaded image on a canvas, similar to the functionality of Google

I have a question regarding the draggable feature in Canvas elements. I uploaded an image into the canvas and would like it to be draggable, similar to Google Maps. My ultimate goal is to enable zoom in and out functionalities as well. Is this achievable ...

javascripthtmlcanvas

unable to decrease the dimensions of the image within the next/image component

Why won't the image size change? I've attempted to adjust the width and height in the component and also tried styling with className, but no luck. The image only seems to resize when using a regular img tag. Here is my code: function Header() ...

cssreactjsnext.jstailwind-css

A guide on incorporating multiple nested loops within a single table using Vue.js

Is it possible to loop through a multi-nested object collection while still displaying it in the same table? <table v-for="d in transaction.documents"> <tbody> <tr> <th>Document ID:</th> &l ...

javascripthtmlvue.js

Calculating grand total upon form initialization

Hey there! I'm working on an input that fetches values and triggers the fntotal function to show a total. The issue I'm facing is that when the form loads, the total doesn't display initially - it only works when values are changed. <inp ...

javascriptjqueryhtml

Error encountered at /edit-menu/edit/: The 'Product' object does not contain the attribute 'is_valid'

I am attempting to extract all product names from the Product model, display them along with their prices on the screen, and enable users to modify the price of any item. Although I have managed to list them out and provide an input field for the price, I ...

pythonhtmldjangoweb-applications

Retrieve a dynamic HTML object ID using jQuery within Angular

In my Angular application, I have implemented three accordions on a single page. Each accordion loads a component view containing a dynamically generated table. As a result, there are three tables displayed on the page - one for each accordion section. Abo ...

javascriptjqueryhtmlangularjs

In what ways can the accessibility of a website be impacted by using CSS

After reading numerous articles on Google and Stack Overflow, I have decided to ask my question straightforwardly in the hopes of receiving a clear and direct answer. Adding another layer to the discussion about whether Does opacity:0 have exactly the sam ...

cssaccessibilityopacitywai-aria

What is the most effective method for incorporating CSS using Javascript to target a specific aria-label attribute?

Is there a way to add a CSS property to a specific tag with a particular aria-label on document load? My goal is to change the flex order of a section to 2. I need help using JavaScript to target the aria-label 'block 1' so I can set the order t ...

javascriptcsstwittertampermonkey

Disregarding 'zIndex' directive within JavaScript function, an image stands apart

There is an issue with the z-index values of rows of images on my webpage. Normally, the z-index values increase as you scroll further down the page. However, I want certain items to have a lower z-index than the rest (except on hover). These items are i ...

javascriptcss

React error due to setting div scroll height on component mount

In my code, there is a special div/container that contains multiple <p/> tags. The container has a reference called divRef, which is initially set to null using the useRef function. <div ref={divRef} style={styles.messageListContainer}> ...

javascriptcssreactjs

Include the url of the html file in your JavaScript code

I have a piece of code that I want to include in my JavaScript instead of HTML. The code is as follows: <script async src="https://www.googletagmanager.com/gtag/js?id=ID"></script> Since all my functions are written in JavaScript, I ...

javascripthtml

A JavaScript function that is only triggered half of the time

After browsing through various forums like StackOverflow, I couldn't find a solution that perfectly fits my issue. I may be new to programming, but I've managed to create several projects already. Currently, I am working on integrating them into ...

javascripthtmlfunctiononload

Adjust the size of an image within a canvas while maintaining its resolution

My current project involves using a canvas to resize images client-side before uploading to the server. maxWidth = 500; maxHeight = 500; //handle resizing if (image.width >= image.height) { var ratio = 1 / (image.width / maxWidth); } else { var ...

javascripthtmlcanvashtml5-canvas

Mentioning VARs found on additional pages

I'm currently designing a website. At the moment, I have set up the site to prompt users for their name on the landing page and store it in a string variable. var username = ""; Once users enter their name and click "Enter Site," they are directed ...

javascriptjqueryhtml

Capture cached images stored in the browser memory without relying on the source attribute of the <img> tag

Imagine you're managing a website, samplewebsite.com and you find that the images on it have been resized to very low quality. When you click on an image, you are directed to a 'view_image' page, for example samplewebsite.com/view?image=u ...

javascriptjavahtmljsoupbrowser-cache