iPad air – Second menu level of main navigation menu Disappears instantly

Home Forums Reykjavik iPad air – Second menu level of main navigation menu Disappears instantly

Viewing 10 posts - 1 through 10 (of 14 total)
  • Author
    Posts
  • #20453
    wuesl
    Participant

    iPad air – Second menu level of main navigation menu Disappears instantly

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hello Oliver,

    When I try to open the second level of the main navigation menu, the menu instantly disappears and I am not able to open this page.

    I add here a link to a little video on my dropbox that shows the issue:
    https://www.dropbox.com/s/c77x36hbjx9smvh/Theme%20Reykjavik%20Menu%20disappears.MP4?dl=0

    First I was thinking that it has something to do with my child the theme. But it has not.

    Then I looked on your page where you have the demo version of this theme. The behaviour there is that the second menu level opens correctly and stays. But the third menu level as well flips away instantly after open it.

    Can you take a look on this issue?

    Thanks in advance
    Ulrich

    PS: I don’t know whether this mistake takes place on Android tablets as well.

    • This topic was modified 9 months, 1 week ago by  wuesl.
    #20466
    Oliver Juhas
    Keymaster

    Hi Ulrich,

    I’d like to ask where do you touch the screen when opening the submenu on your iPad? If you touch the actual menu word, such as “Beratung” in your case, the browser simply takes you to that particular page (as all menu items are displayed as HTML links).

    To open the submenu please try to touch only the “+” symbol. I understand this is tricky on tablet-size screens, so I suggest using this custom CSS to make the “+” area larger:

    @media only screen and (min-width: 55em) and (max-width: 80em) {
    	.main-navigation-container .expander {
    		width: 30px;
    		height: 30px;
    		border-width: 1px;
    		border-style: solid;
    	}
    	.main-navigation-container .menu-item-has-children > a,
    	.main-navigation-container .menu > ul > .menu-item-has-children > a {
    		padding-right: calc( 16px + 0.76em);
    	}
    }

    Please, let me know how it works so I can apply the fix in next theme update too.

    Best regards,

    Oliver Juhas
    WebMan Design

    #20467
    Oliver Juhas
    Keymaster

    And thank you very much for the video! That helps to visualize the issue greatly!

    Best regards,

    Oliver Juhas
    WebMan Design

    #20484
    wuesl
    Participant

    Hello Oliver,

    Indeed, you are completely right. The menu works very well when typing accurately on the plus sign.

    I myself am physically impaired. I am not able to move my fingers. As you can imagine I will have problems to type accurately until the plus sign.

    If you make the responding area wider as you recommended with your CSS code probably it will help. (I will only be able to test it tomorrow.)
    But maybe you also consider to give this sub-menu button a different colour that users for sure are able to focus it and as well visually informed that this area has some further functionality, e.g. opens a pulldown menu!

    (It just comes into my mind that we had an employee who was visually impared and using a magnifying glass; he has also reported, that he has problems with this menu.)

    Thank you very much,
    best wishes Ulrich

    #20486
    Oliver Juhas
    Keymaster

    Hi Ulrich,

    Thank you for your feedback. I can see very clearly the usability issue with the theme here. I will do my best to fix this ASAP.

    Meanwhile I will provide you with improved CSS code tomorrow so using the “+” sign is more engaging. This should at least be a temporary fix for the issue before I update the theme.

    Also, to explain more, the “+” is actually not a button, it is not focusable as a separate HTML element. When you use a TAB key, it will automatically open the submenu and tabs through its items. Surely I understand TAB key is not available in iPad, so I need to rethink the navigation accessibility.

    Best regards,

    Oliver Juhas
    WebMan Design

    #20490
    Oliver Juhas
    Keymaster

    Hi Ulrich,

    Here is updated custom CSS you can use for now (please feel free to adapt it to your needs):

    @media only screen and (min-width: 55em) and (max-width: 80em) {
    
    	.main-navigation-container .expander {
    		width: 30px;
    		height: 30px;
    		background: #054c6c;
    		color: #fff;
    		border-width: 1px;
    		border-style: solid;
    	}
    
    	.main-navigation-container .focus .expander {
    		background: none;
    		color: inherit;
    	}
    
    	.main-navigation-container .menu-item-has-children > a,
    	.main-navigation-container .menu > ul > .menu-item-has-children > a {
    		padding-right: calc( 16px + 0.76em);
    	}
    
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #20534
    Oliver Juhas
    Keymaster

    Hi Ulrich,

    I’ve just updated the theme to version 1.5.0. It contains an improved navigational menu accessibility:

    • Toggling submenus should be assistive technology readable.
    • Touch screens submenu opening works as expected now: first touch will open the submenu, second touch will open the link.

    Please update the theme to fix the issue (no need to use the previously provided CSS code).

    Best regards,

    Oliver Juhas
    WebMan Design

    #20538
    wuesl
    Participant

    Hi Juhas,

    Thank you very much for your perfect work.

    – Toggling submenus should be assistive technology readable.

    Yes, the toggling submenus should now be assistive technology readable. But I myself prefer to open the submenu by hand. For me it is always a bit confusing then I hover the menus and they open instantly.
    If there is just a nice plus sign I would prefer to type on it and a menu opens.

    So some time when you have time you could give me the CSS code due at least delay the opening of the submenu awhile that not all the time when one moves over it opens.

    Thanks for your great work
    Ulrich

    #20539
    Oliver Juhas
    Keymaster

    Hi Ulrich,

    So some time when you have time you could give me the CSS code due at least delay the opening of the submenu awhile that not all the time when one moves over it opens.

    I’m not quite sure what you mean here. Do you need to open the submenu even on desktop (large) screens only when you click the “+”? In that case, please note that no CSS code will help you here. Such functionality would need to be added via JavaScript code.

    And I’m sorry to inform, but this will not be added to the theme. I prefer to open submenus on mouse hover as it reduces additional user click.

    But I think you should be able to add such menu with a plugin. Please try searching WordPress plugins for some suitable menu alternatives.

    As for touch screens, this should now work without needing to touch the “+” exactly. Like I’ve mentioned, you can touch the whole link to open submenu – just like you did in your video above. First touch will open submenu. Only the second touch of the same link will open the linked page. Is this working for you please?

    Best regards,

    Oliver Juhas
    WebMan Design

    #20542
    wuesl
    Participant

    Hi Juhas,

    As for touch screens, this should now work without needing to touch the “+” exactly. Like I’ve mentioned, you can touch the whole link to open submenu – just like you did in your video above. First touch will open submenu. Only the second touch of the same link will open the linked page. Is this working for you please?

    Yes, this works fine.

    I’m not quite sure what you mean here. Do you need to open the submenu even on desktop (large) screens only when you click the “+”? In that case, please note that no CSS code will help you here. Such functionality would need to be added via JavaScript code.

    Yes, this was my intention. I understand that this will only work with javascript code. But how comes that it works on touch screens? With the CSS code that you gave me exactly this functionality was possible. Pressing the plus sign and opening the submenu.

    I see that this is an argument avoiding additionally pressing a key.

    To clear up my question:
    I would like to know how is it possibly to add some extra delay time before the submenu opens? That not every time when one just moves over the menu the submenu pops.

    Thanx ahead
    I wish you a pleasant weekend
    Ulrich

Viewing 10 posts - 1 through 10 (of 14 total)
  • You must be logged in to reply to this topic.