Intro section page

Community feedback

• 

  Jay Khatri•4,230

  @khatri2002Posted 3 months ago

  Hi @lilythelily!

  The developed solution looks great! Below are some suggestions for improvement:

  ---

  1) Fixing Dropdown Hover Issue

  Currently, when hovering over the empty space below the "Features" and "Company" navigation items, the dropdown becomes visible.

  • This happens because the hover effect is applied on the entire <li> element, and its height extends beyond the visible area due to the default display: block of the dropdown.
  • Additionally, the hover logic is being managed using JavaScript's mouseenter and mouseleave events, which adds unnecessary complexity.

  Solution (CSS-Only Approach):

  • Ensure that the dropdown has:

    .dropdown {
        position: absolute;
        opacity: 0;
        visibility: hidden;
    }
    

  • Set the parent <li> to relative positioning:

    .nav-item {
        position: relative;
    }
    

  • Reveal the dropdown only when hovering over the text or dropdown itself:

    .nav-item:hover .dropdown,
    .dropdown:hover {
        opacity: 1;
        visibility: visible;
    }
    

  • No JS required, making it a cleaner, more efficient solution.

  I've created a JSFiddle demo for you:
  Click here to check the working example!

  2) Preventing Layout Shift on Hover

  Currently, hovering over the "Learn More" button causes a slight layout shift, pushing the client images below it down.

  This happens because when hovering, a border of 0.0625rem is added:

  button:hover {
      border: 0.0625rem solid var(--black);
  }
  

  Since the border was not present initially, it adds extra height on hover, causing a shift.

  Solution:

  Instead of adding a border on hover, define a transparent border from the start:

  button {
      border: 0.0625rem solid transparent;
  }
  button:hover {
      border-color: var(--black);
  }
  

  ---

  Keep up the fantastic work! 🚀

  Marked as helpful

  1

  ---

  

  K•390

  @lilythelilyPosted 3 months ago

  @khatri2002 Wow, thank you so much for your clear and constructive advice!! I do really appreciate it. I was aware that something is wrong with my hover state on the dropdown…I will read your feedback thoroughly and revise my code. Thank you again for taking the time ;)

  1