Sub meny not showing on mobiles

hi!
The sub meny is not showing on mobile version!
musikalfabrikken.no
Thanks for any help

Hi there,
Thanks for reaching out.
Relating to your question here, I’m actually in a position to have a view of the submenu from my end. Attached is a screenshot from my end. Could I perhaps be missing out on something here?

I look forward to your reply.
Best Regards,
Support.

Hi and thanks for response. I have the submenu listed under the footer, so is visible at least there when someone navigate the website with a mobile.
But when I press the menu icon on the top (“hamburguer button” ) using a mobile, I can not open or see what is under the “om oss” link. It shows a little arow but thats it. Here I attach a screenshot

hey there

Sorry but I can’t see that menu in the footer, is it removed? there is no such menu in the footer

The menu in the footer is at the very end, here I send an image. That is ok. But the problem is on the top of the page, on the mobile version, where the “hamburger” style menu is (see image attached). When I click on it, the menu shows ok but the sub menu under “om oss” does not open when I hover over. That sub menu is not visible at all for those that see the website from a mobile phone.:confused:

Hello there,

Could you please provide a link to your website so that I can inspect it?

Best Regards,
Support

www.musikalfabrikken.no

Hi there

Ok, i see it now, ( we should not mention menu in the footer at all :slight_smile: ) can you tell me more about your device? how you check it? i just used my android device (Lenovo phone) and menu worked just fine for me, i can’t see any issue even from the browser window

Zoetropo:
I have the same issue.
But I see that yours is working now. What did you do to make it work?

Colorlib support:
You actually have the same issue on your demo site:

The “About” menu works fine in normal sized window.

But if you decrease the window

  • to tablet size window, then on iPhone the About menu does not work anymore.
    In Firefox it only works if you can find and click the very top line of pixels of the tiny little triangle. Only one pixel of the top of the triangle works. The rest of the tiny triangle does not work.
    In Safari and Chrome it works, but only if you are very precise and actually click on the tiny little triangle. If you miss the triangle by a pixel (which is VERY easy) then it does not work. (maybe add some padding on the triangle, to make the clickable area larger?)

  • mobile size window, then the About submenu does not work at all, in Firefox, Safari, Chrome and iPhone.

I am a Mac user, and everything is up to date.

Good evening Zoetropo

We have reported this user interface issue to our dev team and fix will be included in the future update, so far this is what we can offer ((Se my solution above) but in future, we will fix it.
sorry but can’t say any ETA

A hard coded solution is perfectly fine with me - but I dont see a solution above? (is it hidden, somehow?)

Sorry, there was a multiply tictkes on this question,

here is the CSS code that will make menu more visible and rectangle little bit bigger for precise click

.navbar-nav > li {
padding: 0px 10px;
}

.navbar-nav > li > .caret {
height: 20px;
width: 9px;
position: relative;
top: 8px;
}

OK, right… that made the triangle a little larger - but of course it still doesn’t work.
Can you also provide a temporary fix, so that it starts working?

Good morning

Actually, this was a temporary fix :frowning: once we make triangle little bit big clicking on it should be easier
another idea is to utilize some third-party menu plugins

No.
It isn’t working. Making the triangle bigger just makes the triangle bigger, which means that if the submenu ALREADY works, then it is easier to click it.

But like I wrote:
In the browsers that I use + iPhone it does not work at all. The submenu does not show, no matter what or where you click.
Same thing with your demo site. The About menu on your demo site does not work on iPhone. (at least not the latest OS on iPhone 6s - I dont know about the older ones).

Good evening

“In the browsers that I use + iPhone it does not work at all. The submenu does not show, no matter what or where you click.” - Can you share a screenshot of this? maybe we are talking on something different?

I learned an extra detail when I was taking this screen shot:

You still can’t open the “About” submenu on iPhone.

BUT:
If you resize the computer browser to mobile size - then:

If you click in the middle of the tiny triangle - then nothing happens.
If you click at the very top pixel of the tiny triangle - then the link turns red.
But nothing else seems to happen. You just see the attached screen shot.

HOWEVER:
I accidentally pushed the mouse and suddenly the menu scrolled! - So - it seems like if you click that one pixel at the top of the triangle - then the menu opens - but you will not see that it is open, unless you also scroll.
None of this is cool. It is too difficult to hit the exact right pixel to activate it and when you succeed you dont know that the menu is there.

Screen shot of your demo site, after I manage to hit the exact right spot that activates the submenu - but I cant see the menu, unless I also scroll.

oh…sorry - I just realized that the iPhone does the same thing as Safari:
If you hit the right spot on Iphone, then the submenu item turns red - It doesn’t look like anything else happened - but if you swipe the menu - then the submenu actually IS there. It is just hidden.

It is still wrong, and impossible to use - but I cant I cant say that it doesn’t work AT ALL on iPhone…

@macjohn sorry but there is no solution for today on this problem, if you use css code provided on the first page then rectangle will be a little bit bigger and a code will decrease padding between menu elements,
sorry once again, this problem is reported and major changes are necessary to make it work