Navbar Link Underline on Hover with CSS

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). I'll help you master the latest tech here:
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
0:00 Solution
#webdevelopment #coding #programming

[@shangguanwang3982]

This is amazing, I was able to use it in my portfolio website, thank you!

[@wisdomiwunwa7978]

This was really helpful. Many thanks. 🙇🏾🙇🏾💪🏾💪🏾

[@cerealbawxtv]

Great video! How would we get the bar to stay under when we click on the page? Example: if I click home, I want the bar to remain under there until I click a different link in the navbar

[@estherodulana2822]

Thanks 😊 this was really helpful

[@yuyuan5285]

How would I make the underline stay instead of transitioning out when clicked on an active link?

[@mariomeza3514]

You should also show your html

[@fanconans]

"Thanks, it helps me a lot"

[@gayanc6193]

superb😍

[@moonie227]

Hi! Thank you so much for your amazing tutorial. I have a question regarding your CSS course. Is I will purchase your online tutorial how long will I have access to your courses, is there any limited time? TIA

[@ByteGrad]

No limit (unless I stop the company etc.)

[@kawtarelstanej1133]

thanks so easy and so helpfull

[@tomjerkins1548]

you saved me from my client

[@pini5076]

thank you!

[@Seji-tj2pl]

thanks man

[@m4c1el]

hey! having a little problem: when i set the width as 100%, it gets 100% of the viewport, and not 100% of the text. is there any way to solve this?
edit: just solved it! i forgot that the li HAS to be in a relative position. great video anyways!

[@Mr.susage69]

I owe you big time

[@matiasr.28]

Also, if you have padding-right or left in your li's you need to use: width: calc(100% - *padding value, for example 3.3rem*); That was a problem that I had. The reason is because the aditional space created with the padding it's added to the total width of the li. Hope it helps.

[@m4c1el]

@@matiasr.28 hey that's useful in this scenario! i'm currently using tailwind instead of plain CSS, however it's always nice to know these kinds of stuff

[@belive9676]

thanks