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

What methods can be utilized to create sound effects in presentations using CSS?

Let us begin by acknowledging that: HTML is primarily for structure CSS mainly deals with presentation JS focuses on behavior Note: The discussion of whether presentation that responds to user interaction is essentially another term for behavior is open ...

javascripthtmlcssaudiopresentation

The combination of two tags can create a powerful and impactful presence

My task is to place two <h3> tags in the same line or paragraph. <h3>This is the first paragraph. </h3> <h3>This is the second paragraph.</h3> I would like the output to look like this: This is the first paragraph. This is Se ...

htmlcssreactjsbootstrap-4jsx

Using PHP, eliminate all hyperlinks from the DOM HTML

I have a string called $processhtml that contains some HTML. My goal is to remove all link tags and their contents from the HTML using PHP. For example: "This is some text with <a href="#">link</a>" should become: "This is some text with" ...

phphtmldomhtml-parsingdomdocument

The Bootstrap row snag causing text display issues

There seems to be a glitch when the first column has more text than the one next to it. Check out the screenshot provided for reference. Any suggestions on how to fix this issue in Bootstrap? Live Demo: https://jsfiddle.net/oLderkuo/ /* Latest compil ...

htmlcsstwitter-bootstrap

How are the plugins configured for `postcss-import` implemented?

Recently, I've transitioned to using PostCSS exclusively with Webpack. As I explore the functionalities of using postcss-import to inline external stylesheets, I'm noticing that its options offer the ability to configure plugins and transformers ...

csswebpackpostcss

What is the best way to place tfoot at the top of the table

Below is the structure of my table: https://i.stack.imgur.com/QmlVn.png In the table, there are search input fields at the bottom of each column. I would like to move them to the top, right after the <thead> </thead>. The basic HTML code for ...

htmlcsshtml-table

Utilizing HTML form action to link to a PHP script located in a separate folder

My journey begins here Main: Members/name.html search.php Members is a directory containing my html code in name.html <form action="../search.php" method="get"> <div> &l ...

phphtml

Retrieve, process HTML table information using Ajax from an external server or website domain

In order to demonstrate: :the html table data source = "example.com/html_page_source" (tableid="source") :an xml file created from the specified table data = "pretendco.com/xml_built_from_html_table I am seeking guidance on how to build an xml file from ...

jqueryhtmlxmlajaxjson

Create SCSS to style multiple CSS classes

Are there more efficient ways to create css helper classes like the ones shown below? Can I use scss to generate cleaner and better classes? Thank you. .m-1 { margin: 1px !important; } .m-2 { margin: 2px !important } .m-3 { margin: 3px !important } .m-4 ...

csssass

To create a distinctive design, the HTML5 wrapper will specifically enclose the Header element

After using a border, I discovered that my wrapper is only wrapping the header and not extending down to the footer. Can anyone offer some guidance on how to wrap the entire content from the header to the footer? I've come across suggestions to speci ...

htmlcsswrapper

How can we stop a form from being submitted when the input field is

Similar Question: How to prevent submitting the HTML form’s input field value if it empty <?php include '../core/init.php'; if(isset($_POST['nt']) && isset($_POST['ntb'])){ mysql_query("INSERT INTO `pos ...

phpjavascriptjqueryhtmlcss

Having trouble accessing listview capabilities in jquerymobile?

I am currently delving into the world of jquerymobile. I am experimenting with a sample project where I aim to showcase a listview. Below is the code that I have been working on. <!doctype html> <html> <head> <link rel="stylesheet" h ...

jqueryhtmlcsslistviewjquery-mobile

Is it possible to transfer items from one list within a component to another list inside a different component with Vue draggable?

I am having trouble implementing Vue Draggable to move items between lists within a component setup. The issue I'm facing is that the items can be moved within a list, but not from one list to another. The structure involves a Board component that ho ...

htmlvue.jsdraggablevuedraggablevue.draggable

Is it feasible to make Twitter's Typeahead plugin have an initial slide down or fade in effect?

Does anyone have an easy way to make the dropdown from Twitter's typeahead jQuery plugin initially slide down or fade in? I'm trying to animate the size of the dropdown menu when it adjusts, but even a simple fade or slide in would be fine. I pre ...

jquerycsstwitter-bootstraptwittertypeahead.js

Working with CSS3 transitions in PHPStorm is a breeze

For some reason, my phpstorm does not provide code completion for CSS properties like -webkit-translate, translate, or animation. Has anyone encountered this issue before? Any suggestions on how to fix it? ...

cssphpstorm

I'm looking to add a price ticker to my html webpage. Does anyone know how to do this?

PHP Code <?php $url = "https://www.bitstamp.net/api/ticker/"; $fgc = file_get_contents($url); $json = json_decode($fgc, true); $price = $json["last"]; $high = $json["high"]; $low = $json["low"]; $date = date("m-d-Y - h:i:sa"); $open = $json["open"]; ...

javascriptphpjqueryhtml

Place a "sticky" button directly below a second "sticky" navigation bar

Within my app file, I have customized components like an appbar and various page elements: const styles = theme => ({ appBar: { width:'100%', }, }); class App extends Component { render() { const {classes} = this.props; ...

cssreactjsmaterial-ui

The functionality of Access-Control-Allow-Origin is not effective in Chrome, yet it operates successfully in Firefox

I'm facing an issue with my code in the HTML file. I have a second file that I want to load content from, and both files are located in the same directory <div id="mainMenu"></div> <script> $(function() { $('#mainMe ...

jqueryhtmlajaxhttpgoogle-chrome

What could be causing the failure of the update for this computed property in my Vue 3 application?

Currently, I am in the process of creating an audio player using Vue 3 and the Napster API. About the Project I have managed to make the vinyl rotate by utilizing a CSS keyframes-based animation paired with the computed property isSpinning. I intend for ...

javascriptcssvue.jsvuejs3

Steps to incorporate the latest Material Design Bottom App Bar into your project

In our company, we are currently utilizing Vue and SCSS for constructing our latest Progressive Web Application. Depending on specific conditions relating to the user's profile, we need to switch out the left drawer with a Bottom App Bar. Although we ...

cssvue.jssassmaterial-designvue-material