Bootstrap 5 Navbar Link Underline on Hover

👉 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
#bootstrap5 #bootstrap #bootstrapnavbar #bootstraptutorial #webdevelopment #coding #programming

[@ByteGrad]

Hi, mastering CSS is critical as a front-end developer: www.udemy.com/course/professional-css/?referralCode=4C3C08E82629E6B15752
Also, mastering JavaScript is critical if you want to be a modern, professional developer: www.udemy.com/course/professional-javascript-course/?referralCode=0C1D5752923168BC87C2

[@UsaidOk]

Thank you,Really Help full for me

[@zinebtlaiha9573]

Thanks again. Your tutorials are very helpful

[@artemblinkov2241]

I have a link with a dropdown menu, and for some reason, it gets double underline which looks weird. Any suggests on how to fix it? Thanks for the video, by the way!

[@sajidakhan9866]

thank you so much

[@yerfive7795]

Thank you so much

[@Investments1212]

iu use bootsrap nav bar and this not working for this but the color is changing that is already in the bootsrap so underline isnt working for me what can i do

[@key_news9985]

Your explanation is better than my teacher and it's more easier to understand

[@codewithravi8549]

Thank very much it helps me a lot.make more videos on different topics.Radhe-Radhe.

[@katerinamozhaeva8885]

Thank you!!!!

[@Umerkhan2.0]

thank you so much Sir, good job.

[@MagnusAnand]

Two comments:
1. In small screens it doesn't look good because the underline covers all the bar and not just the text. Can you check this?
2. Can't you just get a similar effect with the nav-underline class?

[@orlandolajara3452]

Just apply a @media rule:
@media (min-width: 768px) {
.nav-link:hover {
/* Styles for hover state on larger screens */
}
}
Inside that insert all your code for the hover effects.

[@orlandolajara3452]

By the way you will need to change the 768px to 1000px

[@shangharshadhikari8319]

To solve this issue, you can add "d-inline-block" to the element, which means the underline will cover the width same as width of text. Don't forget to add Bootstrap cdn. Thank me later!!.

[@nevinzachariah1222]

Why hover effect is not working for a tag

[@increment-]

How can I only apply the hover effect on large size screens, not on tablets or smaller screens.
Thanks for the video!

[@orlandolajara3452]

Just apply a @media rule:
@media (min-width: 768px) {
.nav-link:hover {
/* Styles for hover state on larger screens */
}
}
Inside that insert all your code for the hover effects.

[@orlandolajara3452]

By the way you will need to change the 768px to 1000px

[@hoomansalimi172]

Great 🙏

[@UsaidOk]

This lg device Good,But sm device over width issue ,That one reason

[@guillermomazzari4983]

the transition is not working as expected, dont know why, everything else works perfectly

[@zulkiizsukesada4984]

its not working for me, i will just have 1 long underline under the navbar

[@ByteGrad]

Make sure you used position: relative too on the .nav__link (so the one without ::after)

[@zulkiizsukesada4984]

@@ByteGrad can i send you my code as a pastebin ?

[@zulkiizsukesada4984]

@@ByteGrad dunno what i did wrong first time, but now its working! great tutorial :)

[@ByteGrad]

@@zulkiizsukesada4984 Great!

[@raauger]

Thanks! that worked for me.@@ByteGrad

[@ImHansana123]

What if i want to show that underline on the active state (.nav-link.active) ?

[@ImHansana123]

No worries i found it - .nav-link.active::after { opacity: 1; }