• Resolved fvbussel

    (@fvbussel)


    The menu looks good and works good on a PC, Laptop and mobile phone.
    On tablet is shows the hamburger menu without the submenus, they disappears very fast. An item in the submenu cannot be touched. I like to have the menu shown as on a mobile. On the mobile the whole menu is visible and it looks like a page which can be scrolled and the items can be touched easy.

    Thanks in advanced.
    Breakpoint is set to 1200. If set to 481px the menu appears as text and has the same problem…I like 1200 so the hamburger appears and the page looks better.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 35 total)
  • Thread Starter fvbussel

    (@fvbussel)

    Some screenshots:
    tablet-page
    tablet-menu
    No expanded submenu, very short visible.
    mobile-page
    mobile-menu
    With submenu expanded

    Remark:
    The Apply button becomes totally invisible (White?) by hover when inserting a link

    • This reply was modified 1 year, 1 month ago by fvbussel.
    • This reply was modified 1 year, 1 month ago by fvbussel.
    Thread Starter fvbussel

    (@fvbussel)

    … and of course …there are many plugins who can do the job…I’ve installed one.
    I’ve removed the screenshots from the server!

    • This reply was modified 1 year, 1 month ago by fvbussel.
    Plugin Author Oliver Campion

    (@domainsupport)

    I’m extremely glad you found a solution to your problem as I must confess that reading this thread today I didn’t understand what your issue was at all and was left slightly perplexed. Glad you have resolved your own problem.

    Oliver

    Thread Starter fvbussel

    (@fvbussel)

    Oliver,
    I put the screenshots back on the server. See the difference in the menu.
    The menu on the tablet only looks like the menu on mobile for a very short time –> the submenus disappears and it looks like on the screenshot.
    That is without the plugin.
    The menu now is an complete other one with a plugin.
    Frans

    • This reply was modified 1 year, 1 month ago by fvbussel.
    • This reply was modified 1 year, 1 month ago by fvbussel.
    Plugin Author Oliver Campion

    (@domainsupport)

    Hi Frans,

    What exactly are you trying to achieve? I’m afraid I’m still at a loss as to what you are asking?

    Oliver

    Thread Starter fvbussel

    (@fvbussel)

    Take a look at the picture mobile-page. In the upper right corner you see the hamburger icon … so far so good…when touch on it the menu appears …see picture mobile-menu… also the submenus with a orange border…people can touch the submenu items because they don’t disappear unless an item is touched … and the requested page is loaded.

    What I want is that the menu on the tablet looks the same as on the mobile. For a very short time it does but it change very quickly in what you see in picture tablet-menu. ..it’s impossible to touch an submenu item because it disappears very quickly.

    Plugin Author Oliver Campion

    (@domainsupport)

    OK, I think I’m with you. You have selected to view the mobile menu on larger screens and … as a result … when you view on a tablet, the sub-menus cannot expand to be viewed because they immediately open the parent page.

    What device make and model are you using and which browser please? I will then investigate and find a fix for you.

    Oliver

    Thread Starter fvbussel

    (@fvbussel)

    Yes, I wanna see the complete menu open as on the mobile phone.

    My brother tested it on his tablet with Chrome and Samsung s5e.
    The submenu disappears very quickly.
    On the PC screen I can move the mouse over the menu item that expand the submenu and move the mouse in that area and click on the submenuitem. No problem.
    For the website I’m working on now…the problem is solved by using a plugin… For other sites, I like to see the whole mobile menu without using another plugin.

    Plugin Author Oliver Campion

    (@domainsupport)

    Thank you.

    Please confirm your settings for “Customizer – Nav Options – Mobile Nav Breakpoint” and “Customizer – Nav Options – Mobile Nav on Desktop”.

    Oliver

    Thread Starter fvbussel

    (@fvbussel)

    Mobile Nav Breakpoint is set to 1200 px.
    Mobile Nav on Desktop NOT checked, checkbox empty so not choosen.

    Thanks for investigation…

    Plugin Author Oliver Campion

    (@domainsupport)

    Hi,

    Can you please add this CSS to “Customizer – Additional CSS” and let me know if that does what you require?

    If so we’ll add an option for it.

    Thanks,

    Oliver

    @media only screen and (max-width: 1200px) {
    
    .primary-navigation > div > .menu-wrapper > li > .sub-menu:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
    	display: none;
    }	
    
    .primary-navigation .primary-menu-container > ul > .menu-item {
    	display: block;
    }
    
    .primary-navigation > div > .menu-wrapper .sub-menu-toggle {
    display: none;
    }
    
    .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul {
    	display: block;
    }
    
    .primary-navigation > div > .menu-wrapper > li > .sub-menu {
    	margin-left: var(--primary-nav--padding);
    	position: relative;
    	top: auto;
    	padding-top: 0;
    }
    
    .primary-navigation > div > .menu-wrapper > li > .sub-menu {
    	transition: all 0s ease 0s;
    }
    	
    }
    Thread Starter fvbussel

    (@fvbussel)

    Thank you for all your efforts… very nice if it can become an option.
    I put the code in “Additional CSS” of the customizer and deactivated the standard plugin SideMenu. I cannot test it on a tablet but will ask my brother later this evening to test it on his tablet.
    I’ve made some screenshots:

    Mobile
    Menu complete visible and all (!!!) items are aligned to the left.
    Without the code, see: Screenshot Mobile (old file)
    With the code: Screenshot Mobile new

    PC
    Fullscreen (hamburger sticky, hamburger appears when scrolling down).
    Items of the menu visible on the left without submenu. Moving the mouse on menuitem “Home”, submenu appears but covers the other items. Moving the mouse down on the right of the orange box, the second menuitem “Bearded Collie” became visible, submenu covers the other items down.
    With the code: PC Fullscreen menu

    PC, resized browser window… GREAT!!
    With code: PC resized menu

    Sidemenu
    PC, sideMenu
    PC, sidemenu, resized browser window
    Tablet

    • This reply was modified 1 year, 1 month ago by fvbussel. Reason: links set to open in a new window
    Thread Starter fvbussel

    (@fvbussel)

    Mobile
    Not all items are aligned to the left but all items from the submenu are aligned to the left, some should be a bit to the right, for example the items between “Fotoalbums” and “Berichten”.
    (subitem with a submenu)

    Thread Starter fvbussel

    (@fvbussel)

    I’ve cleaned all the browsers. ..I did some tests again.
    With the code, it looks oke on mobile and on the PC with the window resized. Full screen see the picture. …and on a touch tablet the menu is the same as earlier.
    With code, sidemenu deactivated: Menu-tablet.
    The same problem, when touched an item, for example “Winkeltje”, submenu appears but the browser goes to the page “Winkeltje”. …no time to touch a submenuitem.

    • This reply was modified 1 year, 1 month ago by fvbussel.
    • This reply was modified 1 year, 1 month ago by fvbussel.
    Plugin Author Oliver Campion

    (@domainsupport)

    Please provide a link to your site with the SideMenu plugin deactivated and the CSS we provided added to “Customizer – Additional CSS” so that we can inspect the links to see what’s causing the issue. Unfortunately we cannot inspect a screenshot.

    Thank you.

Viewing 15 replies - 1 through 15 (of 35 total)
  • The topic ‘view hamburger menu tablet’ is closed to new replies.