Bootstrap 5 Navbar Link Underline on Hover

[@UsaidOk]

Thank you,Really Help full for me

[@key_news9985]

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

[@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!

[@zinebtlaiha9573]

Thanks again. Your tutorials are very helpful

[@husteldev007]

thank you so much

[@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!!.

[@yerfive7795]

Thank you so much

[@codewithravi8549]

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

[@Truestory-1212]

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

[@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

[@katerinamozhaeva8885]

Thank you!!!!

[@guillermomazzari4983]

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

[@nevinzachariah1222]

Why hover effect is not working for a tag

[@Umerkhan2.0]

thank you so much Sir, good job.

[@UsaidOk]

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

[@hoomansalimi172]

Great 🙏

[@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

[@ajaymaliya665]

simply use that link-underline-danger

[@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

[@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; }