1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Navigation menu problem

Discussion in 'HTML & Website Design' started by Lance Johnson, Jun 4, 2019.

  1. #1
    When you move the mouse down on the navigation menu on my company's website it often jumps to the next navigation column. If you hold the cursor over the dropdown word for a few seconds it works much better. Any ideas why this is happening? I added a link to a video so you can see the problem.

    SEMrush
     
    Lance Johnson, Jun 4, 2019 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,466
    Likes Received:
    360
    Best Answers:
    28
    Trophy Points:
    335
    #2
    You didn't post a link to the problem page, nor a minimal test case. We can only guess, which I will do now.

    Since this is a guess, you'll understand if I don't provide a guarantee of being fit for purpose. Look to the first drop down being overlain by the second. The second likely has an implicit higher z-index.

    If you can't link us to the page, construct a minimal test case and post the html and css sources.

    gary
     
    kk5st, Jun 4, 2019 IP
  3. Lance Johnson

    Lance Johnson Peon

    Messages:
    4
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    3
    #3
    Thanks for your response. I'm new to web stuff so this issue has been over my head. Here's a link to the page and I attached the css code for the header.

    https://www.3-gis.com/
     

    Attached Files:

    Lance Johnson, Jun 4, 2019 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,466
    Likes Received:
    360
    Best Answers:
    28
    Trophy Points:
    335
    #4
    Am unable to replicate your issue. There are issues*, which as a commercial site, ought to be coded differently (so it doesn't act like Grandma's family album site). Take a long look at Jason's article, Progressive Enhancement, especially part 4, for the immediate needs. As you read, I think the changes will become obvious to you.

    gary

    *The responsiveness is clumsy and doesn't provide for accessibility needs.
     
    kk5st, Jun 4, 2019 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,807
    Likes Received:
    1,078
    Best Answers:
    22
    Trophy Points:
    400
    #5
    I was able to replicate it but I have no idea what's causing it. I'd blame the issue on the javascript you're using for the menu. You can do the same thing using plain HTML/css. As an example: https://codepen.io/andornagy/pen/xhiJH
     
    qwikad.com, Jun 5, 2019 IP
  6. Lance Johnson

    Lance Johnson Peon

    Messages:
    4
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    3
    #6
    Thanks for your response. I attached the JS code for the header just in case someone is able to spot an issue.
     

    Attached Files:

    Lance Johnson, Jun 5, 2019 IP
  7. Lance Johnson

    Lance Johnson Peon

    Messages:
    4
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    3
    #7
    Figured out how to fix this if anyone's interested. I changed the .5 to .1 on these lines of code in the style sheet.

    {{ trans('.5s all ease') }}
     
    Lance Johnson, Jun 5, 2019 IP
    kk5st and qwikad.com like this.
  8. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,807
    Likes Received:
    1,078
    Best Answers:
    22
    Trophy Points:
    400
    #8
    Good job! Thank you for posting the solution.
     
    qwikad.com, Jun 5, 2019 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,801
    Likes Received:
    1,593
    Best Answers:
    229
    Trophy Points:
    515
    #9
    It is nice when someone finds the answer on their own or elsewhere, when they come back and say what they found. It makes it so we don't keep trying to help pointlessly, and it might just help someone further down the road with the same issue.
     
    deathshadow, Jun 5, 2019 IP