Hover not working on mobile phone

HTML & CSS
1

I am using the following css for a menu on mobile phones: (min-width: 320px) and (max-width: 640px)

.mb-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
    position: relative;    
    display: inline-block;
}

.mb-menu li {
      border: none;
      position: relative;
    display: block;
}


.mb-menu li ul {
    width: 0;    
    margin: 0; 
    position:absolute; 
    top: -9999em;
    right: -9999em;
    z-index: 100;   

}

.mb-menu li:hover ul,
.mb-menu li:focus ul,
.mb-menu li:active ul {
    width: 100%;
    top: 2em;
    right: 0;
    padding: .5em 24px .5em 0;    
    border-top: solid 1em rgba(0,0,0, 1);  
    background: #000;  
}

On desktop and laptop when I make the screen smaller this works great, but on mobile phones the sub menu won’t show: What am I doing wrong?

Thank you in advance

2

Mobile devices use touch screen, which reacts only to touch, so there is no hover.
Systems vary, on some a first touch is considered a hover and the second a click, but on many a touch is a click.
You cannot rely on hover for mobile devices.
Also, I’m not sure about your selectors, without seeing the html.

.mb-menu li ul

Should that be?

.mb-menu ul li

Or is there a nested list?

3

Hi Sam. Thanks for the reply. There is indeed a nested list. This is the html:

<ul class="mb-menu">
    <li class="nav-icon" >
     <img src="/images/nav-icon.png">
         <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>        
        </ul>   
    </li>
</nav>

Sorry for not beeing complete :frowning:

4

I see you have mis-matched tags:

<ul class="mb-menu">
  closing with
</nav>
5

Hi Sam. Sorry my wrong the closing tag is a as well

6

With that corrected, it appears to work, though I don’t have access to an actual mobile at present. But I would think a tap on the icon would open the menu. These are usually a problem for mobiles when the hover icon is a link too, not the case here.

7

Hi Sam. It indeed works on latptop with adjusted screen but on both my iphone and sony experia it isn’t working. Do you have any other suggestions maybe?

8

It’s hard to say without having anything to test it with. From trying the code, it works as expected on the desktop.
FWIW the way I do this kind of thing is more like this and appears to work on touch screen:-

.mb-menu li ul { 
    display: none; 
    width: 100%;
    position: absolute;
    top: 2em;
    right: 0;
    padding: .5em 24px .5em 0;    
    border-top: solid 1em rgba(0,0,0, 1);  
    background: #000;  

}

Instead of hiding off-screen. Not that it should make a difference.

.mb-menu li:hover ul {
    display: block; 
}

Also, do you need hover, focus and active? Just hover should do it, only mouse users will hover and touch screen users will have to tap to open the menu.

9

Another thought, does the element need to be wrapped in an <a> for hover to work? I thought it did, though it evidently does work on desktop. I normally do it that way, with an <a>.

10

Hey @donboe

Could you please upload demo, so we can exactly see what cause problem.I guess you defined right media queries, something like this:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
   
}

or this

@media only screen and (min-device-width: 320px) and (max-device-width: 640px) {

}
11

@ Sam. I know some people advocate to use the display none rather than to use the negative margins. For me sofar it always worked though

@bedakb I use min-with instead of min-device-width but yes that is how the media query indeed looks like. Here is the link to the website. Hope yo can see where things are going wrong

12

Using device-width in media queries isn’t really recommended. There’s a SitePoint article which explains in more detail:

1 Like
13

I didn’t consider the queries, now I look at them, I’m curious, why the double sided query?

(min-width: 320px) and (max-width: 640px)

Are you doing something different for screens less than 320px?
If not, why not just

@media only screen and (max-width: 640px) {}

Apparently not.

I know, it should not make a difference. Just a suggestion to try.

14

The menu is showing on the iphone for me ok.

However, generally you would not do this on hover but add a toggle with js to do it on click just to make sure mobiles can open and close the menu if needed. At the moment a first touch will open the menu but then there is no way to close the menu on touch devices.

It’s much better to implement a click menu for the small screen version. You can do this easily with some js to toggle a class on the element when clicked. It can be done in CSS with the checkbox hack but I believe there are issues in some android devices with the checkbox hack.

1 Like
15

Hi Paul. Thanks for the reply. I was thinking of JS I will have a better look into that. Thanks

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.