view hamburger menu tablet

I put the CSS back and deactivated both SideMenu plugins.
Website: wp.nederlandsebeardedcollieclub.com

Your CSS is messed up. You have pasted …

.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle& # 091 ;
        aria-expanded=false] ~ ul {
            display: block;
}

… instead of …

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

You might want to double check that the rest of the CSS I gave you above is pasted correctly too.

Oliver

I’ve copied it from the e-mail…that’s were it went wrong.
Now I copied it from the message here…So far as I can see the code looks oke.
PC fullscreen same problem.
PC resized window. Much better. The menu is now complete open but if you go to “Fotoalbums” and hit the hamburger icoon the menu appears but some of the page “Fotoalbums” stays visible …editor problem?? (gutenberg / spectra blockeditor)
Mobile, the same as PC resized window.

PC fullscreen same problem.

What exactly do you mean by this? If you want to see the mobile nav on all screen sizes then you should be using this option “Customizer – Nav Options – Mobile Nav on Desktop” and in this case you can remove the media query from the CSS I gave you and just use this instead …

.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;
}

On your Fotoalbums page, the content is appearing above the menu because the z-index for the content is set to 10. Please add this and let me know if it fixes it …

.site-header {
    z-index: 11;
}

PC, resized window, problem fixed, works very fine.
Mobile, not fixed, parts stay visible.

PC Fullscreen:
No, I don’t want to see the mobile nav when I open the page…I only want to see it when I click on the hamburger icoon which appears when I scroll down. (Sticky hamburger on large screens)
…It’s nice to see that the menu opens complete…yes as in the mobile menu. Or that the submenuitems opens a little bit to the right when the mouse is moved on the item so the items stays visible when a submenu opens.

Mobile, not fixed, parts stay visible.

Please explain what this means.

…It’s nice to see that the menu opens complete…yes as in the mobile menu. Or that the submenuitems opens a little bit to the right when the mouse is moved on the item so the items stays visible when a submenu opens.

I can’t work out if you are asking me to do something here or not.

Please advise.

Mobile, not fixed, parts stay visible.

On mobile the menu opens completely, that’s good. Then I open the page “Fotoalbums”, the page appears, that’s good. Then I open the menu again via touching the hamburger icoon. The menu opens completely but parts of the page “Fotoalbums” stays visible. The code:
.site-header { z-index: 11; } doesn’t work on my mobile but works on my PC with the screen resized.

Full screen.
I like to see something like the mobile menu but only when I click on the hamburger icoon when it appears when I scroll down the page (Sticky hamburger on large screens). I like also that the submenus are open when I go to the menu via the hamburger icoon then it is much easier to click throug the menu. (like the SideMenu)…when the page is on top (header completely visible, the horizontal menu is visible and the hamburger icoon invisible). I don’t wanna see the hamburger icoon which is the case. When I use the option Customizer – Nav Options – Mobile Nav on Desktop the horizontal menu disappaers and the hamburger icon appears…that’s not what I want.

Please try this …

.primary-navigation-open .primary-navigation {
    z-index: 11;
}

… which should sort out the overlapping content on mobiles.

With regards to the sticky hamburger … you could try this …

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

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

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

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

.sticky-button.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 > div > .menu-wrapper > li > .sub-menu {
	transition: all 0s ease 0s;
}

I hope I put the code the right way.
The first code I put at the end of the code I already put in the CSS box before the }
And the other code I put above al this code.
I use /* and */ with text between to seperate both codes, to make it more clear for me.

Almost there…
PC, resized window and mobile works!! Very easy now to move / touch around the menu, no overlap as you call it.

PC, full screen.
…no. Menu opens the same way when clicked on the hamburger icoon when this one appears. Aligned to the left and also the area of the submenu is aligned to the left, covering the items below and now with overlap of for example page “Overzicht (jaar)” under menu Home –> “Fotoalbums”.

Should both codes concerning the z-index out of the code of @media…{ } ?

• This reply was modified 1 year, 9 months ago by fvbussel.

OK, for clarity, your entire CSS (from me) should now look like this …

@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;
}
	
}

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

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

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

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

.sticky-button.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 > div > .menu-wrapper > li > .sub-menu {
	transition: all 0s ease 0s;
}

.site-header {
    z-index: 11;
}

.primary-navigation-open .primary-navigation {
    z-index: 11;
}

Replace everything I’ve asked you to add with that and then let me know and I’ll take another look.

Thanks,

Oliver

The same results…
PC, resized window perfect!!
Mobile perfect!!
PC, full window
Menu opens the same way when clicked on the hamburger icoon when this one appears. Aligned to the left and also the area of the submenu is aligned to the left, covering the items below and now with overlap of for example page “Overzicht (jaar)” under menu Home –> “Fotoalbums”.

• This reply was modified 1 year, 9 months ago by fvbussel.

Apologies, replace all with this …

@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;
}
	
}

.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 {
	display: 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 {
    z-index: 11;
}

.primary-navigation-open .primary-navigation {
    z-index: 11;
}

PC, resized window:
Menu appears completely open!!
…that’s really fine and I can click all around.
Area (backrground) of the submenu gray and orange border, window wide.

Mobile:
Menu appears completely open!!
Area (background) of the submenu is white!! (not a problem) with orange border, screen wide.
I can touch around without any problem.

PC, full window:
Menu appears completely open!!
Area (background) of the submenu gray and orange border, window wide.
The latter may not be beautifull. Unfortunately there’s overlap with for example page “Overzicht (jaar)” under menu Home –> “Fotoalbums”. Returning from that page back to menu some items stay visible.
I can click around the menu without any problem.

Add this to the end of the CSS I gave you …

.sticky-button.primary-navigation-open .primary-navigation {
z-index: 11;
}

You did it!!! It works!!
Full screen, resized window and mobile. I can click / touch around without any problem or overlay.
Except that the submenu “block” is screen wide (not a problem) it looks good.
I will ask my brother to test it and send me a screenshot from his tablet.

Thanks very much!!
Are you making this an option in the plugin?

• This reply was modified 1 year, 9 months ago by fvbussel.