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
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!
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?
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.
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!!.
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
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.
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
Your explanation is better than my teacher and it's more easier to understand
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!
Thank you,Really Help full for me
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?
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.
By the way you will need to change the 768px to 1000px
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!!.
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
Thanks again. Your tutorials are very helpful
thank you so much
How can I only apply the hover effect on large size screens, not on tablets or smaller screens.
Thanks for the video!
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.
By the way you will need to change the 768px to 1000px
Thank you so much
Thank very much it helps me a lot.make more videos on different topics.Radhe-Radhe.
Why hover effect is not working for a tag
the transition is not working as expected, dont know why, everything else works perfectly
This lg device Good,But sm device over width issue ,That one reason
Thank you!!!!
simply use that link-underline-danger
its not working for me, i will just have 1 long underline under the navbar
Make sure you used position: relative too on the .nav__link (so the one without ::after)
@@ByteGrad can i send you my code as a pastebin ?
@@ByteGrad dunno what i did wrong first time, but now its working! great tutorial :)
@@zulkiizsukesada4984 Great!
Thanks! that worked for me.@@ByteGrad
thank you so much Sir, good job.
Great 🙏
What if i want to show that underline on the active state (.nav-link.active) ?
No worries i found it - .nav-link.active::after { opacity: 1; }