Bootstrap 5 Navbar Link Underline on Hover

Поділитися
Вставка
  • Опубліковано 26 гру 2024

КОМЕНТАРІ • 31

  • @ByteGrad
    @ByteGrad  2 роки тому

    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

  • @key_news9985
    @key_news9985 2 роки тому +4

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

  • @artemblinkov2241
    @artemblinkov2241 Рік тому +3

    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!

  • @UsaidOk
    @UsaidOk Рік тому +1

    Thank you,Really Help full for me

  • @MagnusAnand
    @MagnusAnand Рік тому +2

    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
      @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
      @orlandolajara3452 Рік тому

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

    • @shangharshadhikari8319
      @shangharshadhikari8319 Рік тому +1

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

  • @Truestory-1212
    @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

  • @zinebtlaiha9573
    @zinebtlaiha9573 Рік тому +2

    Thanks again. Your tutorials are very helpful

  • @husteldev007
    @husteldev007 Рік тому +1

    thank you so much

  • @increment-
    @increment- Рік тому +1

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

    • @orlandolajara3452
      @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
      @orlandolajara3452 Рік тому

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

  • @yerfive7795
    @yerfive7795 Рік тому +1

    Thank you so much

  • @codewithravi8549
    @codewithravi8549 2 роки тому +1

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

  • @nevinzachariah1222
    @nevinzachariah1222 Рік тому

    Why hover effect is not working for a tag

  • @guillermomazzari4983
    @guillermomazzari4983 Рік тому

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

  • @UsaidOk
    @UsaidOk Рік тому

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

  • @katerinamozhaeva8885
    @katerinamozhaeva8885 8 місяців тому +1

    Thank you!!!!

  • @ajaymaliya665
    @ajaymaliya665 5 місяців тому

    simply use that link-underline-danger

  • @zulkiizsukesada4984
    @zulkiizsukesada4984 2 роки тому

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

    • @ByteGrad
      @ByteGrad  2 роки тому +2

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

    • @zulkiizsukesada4984
      @zulkiizsukesada4984 2 роки тому

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

    • @zulkiizsukesada4984
      @zulkiizsukesada4984 2 роки тому +1

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

    • @ByteGrad
      @ByteGrad  2 роки тому

      @@zulkiizsukesada4984 Great!

    • @raauger
      @raauger Рік тому

      Thanks! that worked for me.@@ByteGrad

  • @Umerkhan2.0
    @Umerkhan2.0 Рік тому +1

    thank you so much Sir, good job.

  • @hoomansalimi172
    @hoomansalimi172 Рік тому +1

    Great 🙏

  • @ImHansana123
    @ImHansana123 Рік тому

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

    • @ImHansana123
      @ImHansana123 Рік тому +1

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