I didn't understand.. Can you tell me im details?

he is saying that in html file you only define class as. start-home but in css file you use. start-home start-blog etc without defining them in html file

Sorry it was my mistake. Here is the actual CSS codes - @import url('fonts.googleapis.com/css?family=Open+Sans&display=swap'); body { font-family: 'Open Sans', sans-serif; background: #2c3e50; } nav{ position: relative; margin: 270px auto 0; width: 590px; height: 50px; background: #34495e; border-radius: 8px; font-size: 0; box-shadow: 0 2px 3px 0 rgba(0,0,0,.1); } nav a{ font-size: 15px; text-transform: uppercase; color: white; text-decoration: none; line-height: 50px; position: relative; z-index: 1; display: inline-block; text-align: center; } nav .animation{ position: absolute; height: 100%; /* height: 5px; */ top: 0; /* bottom: 0; */ z-index: 0; background: #1abc9c; border-radius: 8px; transition: all .5s ease 0s; } nav a:nth-child(1){ width: 100px; } nav .start-home, a:nth-child(1):hover~.animation{ width: 100px; left: 0; } nav a:nth-child(2){ width: 110px; } nav a:nth-child(2):hover~.animation{ width: 110px; left: 100px; } nav a:nth-child(3){ width: 100px; } nav a:nth-child(3):hover~.animation{ width: 100px; left: 210px; } nav a:nth-child(4){ width: 160px; } nav a:nth-child(4):hover~.animation{ width: 160px; left: 310px; } nav a:nth-child(5){ width: 120px; } nav a:nth-child(5):hover~.animation{ width: 120px; left: 470px; }

You're welcome 💙

You're welcome 💙

Thank you 💙

This is teaching lmao

@@CodingNepal yw

Glad you like them!

Thank you... Keep watching ❤️

Thank you 💙 Follow us on insta - instagram.com/coding.np

You're welcome bro 💙

Here is the video - kzfaq.info/get/bejne/qsmjntNe08myYH0.html

Facing the same problem

Thank you 💙

Always welcome

Thank you.. Keep supporting ❤️

Use javascript for that.. I've made many videos on it.. Visit channel.

Your welcome 💙

Thank you 💙

Thank you 💙

If you have some knowledge of css then you can put dynamic width or static width according your desire.

You're welcome 💙

I also face same issue did you find this problem solution please let me know

you must remove the .start-home, but you'll have the selector render only when hovering something

Welcome 😊

Thank you 💙

Thank you :)

Please continue these lessons !!! Thanks a lot!!!!!

It's mean if the nav has taken any font-size then make it 0; It's not required and you don't need to put this line.

Yes it's not responsive.

Yes you can use my code.

Thank you :)

Source files link is in the description.

use Javascript or JQuery..

@@CodingNepal IT is posible to do it with css?

@@ElSuperNOOB No there is no page reload event listener in CSS.

You're welcome... Stay tuned 😁

@@CodingNepal Thank you, I've been watching from Turkey got me very useful video

According to this design, the active page is home page and when you hover on other menu the animation slides smoothly and it go to default active tab when the pointer out. I hope you got it.

You need to do some change in css codes. Contact on me Instagram. I'll do for you.

Thank you 💙

This article helps you - techbrij.com/css-selector-adjacent-child-sibling

@@CodingNepal ok , and could you please tell me how to active this in the last child??

Please mention time.

It's not responsive.

This url is used for font-family.. You can get code files from here drive.google.com/file/d/1aURPkqJP6ASxBsLHozPEdn3oYJPCetMD/view?usp=drivesdk

Help me pleae3

www.codingnepalweb.com/2020/06/active-tab-hover-animation-with-icons.html

It's atom.

Contact on me Instagram

Yes you can.

I do not use whatsapp.