problem with submenu on smartphone

[SirenaColella]

Hello guys, I need your help. They are aware of the rules of the forum, but this time I would like to make an exception and do not report my code of codepen. I hope you forgive me because so I can be more clear and I can let you know what is my problem.
I am attaching two screenshots. My problem affects only the display on smartphones.

In practice, when I click on “info” opens the submenu. When I click on “Info” to close it, the submenu does not close, remains open and is expanding. This only on smartphones.

Could you give me a hand to solve? I thank you infinitely. I am days that I’m banging my head

my website is http://www.grettingfrom.com/category/news/

the screenshot is here http://imgur.com/a/56oIa

[Beverleyh]

In practice, when I click on “info” opens the submenu. When I click on “Info” to close it, the submenu does not close, remains open and is expanding. This only on smartphones.

Have you fixed it because it closes fine on iPhone 6S Plus.

[I.m.learning]

Only the hamburger icon closes your menu on my Android. What you’re showing is the same.

[SirenaColella]

Hi @Beverleyh thanks a lot for your support, but I haven’t fixed, I have this problem with my smartphone. I use bootstrap. I think there is something with bootstrap, but I don’t find anything. :(

[SirenaColella]

thanks @I.m.learning for the support, Yes, I know :(

[I.m.learning]

Navbar collapse, navbar, navbar toggle or drop down toggle? Can’t view source on mobile. But I use Bootstrap and use this for my navigation and the latter for some options.

Check those, but being mobile, it’s hard to examine without code

[SirenaColella]

Yes, I know, but there is someone can help me with firebug or chrome extension? Please… :(

[Beverleyh]

Hhhhmmmm, just making an educated guess but when I view the source via Safari on iPhone, I can see a custom.js file. Have you tried to put a hover toggle in there to override the default Bootstrap open action for the dropdown menu? If so, maybe that is causing conflicts – take it out and see if the default action works as intended, because I think your custom JS is conflicting with built-in Bootstrap JS.

[I.m.learning]

Does aria-expanded have anything to do with it?

[Beverleyh]

Nothing to do with ARIA roles – ARIA improves accessibility.

[SirenaColella]

Hello guys. I thank @Beverley and @I.m.learning for the support. Your messages were precious. In fact there is a conflict in custom.js file. Is there a way to ensure that these instructions of code just for smartphones and tablets?

<script>
$ (Function () {
     $ (. “Dropdown”). Hover (
             function () {
                 $ (‘. Dropdown-menu’, this) .stop (true, true) .fadeIn (“fast”);
                 $ (This) .toggleClass (‘open’);
             },
             function () {
                 $ (‘. Dropdown-menu’, this) .stop (true, true) .fadeOut (“fast”);
                 $ (This) .toggleClass (‘open’);
             });
     });
</script>

In practice, there is a mediaquery for javascript? I wish that for laptops this code is working. For smartphones and tablets not.

[SirenaColella]

I hope this is my last post. Here, on Codepen, I write a mediaquery for javascript, but it doesn’t work.

http://codepen.io/Colella/pen/eByVaQ?editors=1010

Can you help me to understand where I’m wrong? I’m sure that I’m on my way… I hope

[I.m.learning]

I think you need to rework your navigation. You might have too many styles affecting it. Also, I see a top level list item being closed after the unordered list has been closed.

My suggestion is to use one style or framework first. If you are using Bootstrap; strip all the non-essential styles out of it and use ONLY Bootstrap supplied classes and ID’s. Do not add you own classes or ID’s until after you have it working how the framework states.

If you are still having issues, create a list of how you want it to look and that will help us understand what it is you are trying to accomplish.

The main things are– do not combine framework styles for the same entity, and write the code how the framework is designed to work.

I’d rather see you write the code correctly rather than trying to find a hack. There’s no reason why your navigation shouldn’t work if you’re using Bootstrap–and that’s for ALL browsers. I use it and had no issues with any of my devices or browsers.

You’re conflicting somewhere and instead of guessing, just start all over and start small.

[Shikkediel]

With regard to the pen and matchMedia(), I think the syntax is without @media in front:

var mq = window.matchMedia('all and (min-width: 768px)');

I have not looked at the larger issue in depth any further…

[Author]

Posts