view hamburger menu tablet

  • Resolved fvbussel

    (@fvbussel)


    1 year, 9 months ago

    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 5 replies - 31 through 35 (of 35 total)
  • Plugin Author Oliver Campion

    (@domainsupport)

    Yes, I’ll be adding this as an option but I will need to give it a bit more consideration before doing so.

    If you put it back to using the CSS and turn SideMenu off I can take a look to provide CSS to reduce the submenu block width on larger screens.

    Thread Starter fvbussel

    (@fvbussel)

    I turned off the SideMenu.

    Plugin Author Oliver Campion

    (@domainsupport)

    This should make the sub menus as wide as the menu items rather than being full page width. Be sure to replace all CSS I gave you with this as it includes everything …

    @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 > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul,
.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=true] ~ ul {
	display: inline-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;
}
	
}

.sticky-button.primary-navigation-open .primary-navigation > div > .menu-wrapper > li > .sub-menu:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
	display: none;
}	

.sticky-button.primary-navigation-open .primary-navigation .primary-menu-container > ul > .menu-item {
	display: block;
}

.sticky-button.primary-navigation-open .primary-navigation > div > .menu-wrapper .sub-menu-toggle {
display: none;
}

.sticky-button.primary-navigation-open .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul,
.sticky-button.primary-navigation-open .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=true] ~ ul {
	display: inline-block;
}

.sticky-button.primary-navigation-open .primary-navigation > div > .menu-wrapper > li > .sub-menu {
	margin-left: var(--primary-nav--padding);
	position: relative;
	top: auto;
	padding-top: 0;
}

.sticky-button.primary-navigation-open .primary-navigation > div > .menu-wrapper > li > .sub-menu {
	transition: all 0s ease 0s;
}

.site-header,
.primary-navigation-open .primary-navigation,
.sticky-button.primary-navigation-open .primary-navigation {
    z-index: 11;
}
    Thread Starter fvbussel

    (@fvbussel)

    Looks very good from here.
    PC full screen, PC resized window and mobile phone.

    Plugin Author Oliver Campion

    (@domainsupport)

    Just wrapping this up, we’ve added an option “Customizer – Nav Options – Mobile Submenus on Desktop” to add this functionality to the plugin.

    Thanks again for reporting the issue.

    Oliver

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