Remove hover display on menu when responsive

HTML & CSS
1

I’m working with Bootstrap and I’ve been able to get the hover over to work for sub menus. However, I can’t disable it on mobile.

I did get this to work some.

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

.dropdown:hover {
display: none !important;
}

}

However, I took that out because I got some funny glitches when I used that and I couldn’t get the sub menu to stay open when I clicked on an li once the menu went responsive.

http://www.connect4webdesign.com/FrogTummy/nuames/

Any suggestions?

2

Why not only serve the dropdown styles to larger screens via @media?

3

You mean don’t have submenus on mobile? I think I’m confused by your question.

4

Why disable it for mobile, has your testing revealed problems?
https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fwww.connect4webdesign.com%2FFrogTummy%2Fnuames%2F

5

I don’t want to disable the sliding effect. I want to disable the hover over effect. See how the hover displays when mobile?

397×670 96.9 KB

6

Lets say "Our School"s class is “dropdown” and menus class starting with “About Us” is “dropdown-menu”.

Then you must:

.dropdown:hover .dropdown-menu {
    display: none;
}

Edit: Actually, i just looked at your source. If you hide your menu using “display: none” while hover, you can’t show it when “.dropdown” clicked. Because hover handler still run at click. You must use some jquery at least.

7

Yea. I tried that earlier and it just stuck. What kind of jQuery solution when I need to do? Right now I’m not ever sure of something to try in jQuery.

8

We need to know which handler in bootstrap shows the menu on hover. If we add some jquery to hide it, it can be shown when bootstraps handler run.

I don’t think it will a big issue on mobile because of hover handler doesn’t work in mobile screens. If you test your website on mobile screens you won’t see the that hover effect.

Edit again: I think it will show the menu because of last touch as hover. My mistake. :confused: Let me think about it.

9

Alright. When you click the main items in nav, bootstrap adds the “open” class to the element.

Just add these inside of (max-width: 768px):

.dropdown-menu {
    display: none !important;
}

.open .dropdown-menu {
    display: block !important;
}
1 Like
10

You da man! Sitepoint needs a way for people to tip others in cases like this! Thanks. I was about to try another menu.

2 Likes
11

I’m glad to you don’t waste your time to work with another menu. Cheers!

12

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