using checkbox makes my overlay toggle not work..

Report · Mar 04, 2025

I created a menu upper left in css and a return to an "X" using a checkbox class that i visual hid- but for some reason the checked class is preventing the overlay menu items from appearing

the test : https://pitchlab.net/checked_test.html

and the way it should work (without "checked"): https://pitchlab.net/

not sure why that checkbox css would prevent the overlay from working

Report · Mar 04, 2025

Browser Inspect (F12), Console:

Working page:

Non-working page:

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 04, 2025

thanks Nancy - I removed those conflicting JS no more 404s but still no go

https://pitchlab.net/checked_test.html

Report · Mar 05, 2025

It appears to be a CSS/HTML problem.

The CSS of the working page is mirrored in the class callouts in the very specifically structured HTML of that page. That's not the case in the broken page.

In order for the css of the broken page to do the same thing as the working page, all those class callouts need to be part of the html structure. Look at your class names on the working page, then look where they appear in the HTML. You need to mirror that structure identically, if you plan to use the same CSS (albeit with slightly different class names).

Report · Mar 05, 2025

Thank you Jon..

I believe I understand what you mean. Ive created a revised page that now should have idential css and html structure except for the addtion of the checkbox html (the differing html is only different by including the checkbox structure..the rest should be identical) but it isnt working so can you tell me where I went wrong?:

original that functions where the overlay menu appears but the burger menu doesnt include the html that converts it to an x on toggle:

https://pitchlab.net/

</div>

and the test that does convert the burger menu to an x but the overlay menu does not function properly on toggle:

https://pitchlab.net/checked_test3.html

</div>

</label>

</div>

Report · Mar 06, 2025

CSS is funny sometimes.

I honestly don't know why this works, it was just a hunch, but I moved things around a little, putting the hidden <input> immediately after the opening <body> then changing the CSS slightly to target the right spots. The X appears and the slide in works...

Then change the CSS to...

.checkbox_burger:checked + div > label > .hamburger > .top-bun{

position:fixed;

left: 62px;

top:41px;

width: 30px;

transform: rotate(45deg);

-webkit-animation: burger-hover 0s infinite ease-in-out alternate;

animation: burger-hover 0s infinite ease-in-out alternate;

transition: all 400ms ease-in-out;

height: 1px;

}

.checkbox_burger:checked + div > label > .hamburger > .meat{

position:fixed;

left: 62px;

top:41px;

margin-bottom: 12px;

width: 30px;

transform: rotate(-45deg);

-webkit-animation: burger-hover 0s infinite ease-in-out alternate;

animation: burger-hover 0s infinite ease-in-out alternate;

}

Report · Mar 06, 2025

Jon you rock..!

thank you..

https://pitchlab.net/

CSS is like a petulant child sometimes.. Ive noticed that particularly lately.. I tried a version of what you did (moving the input in different spots) but no luck.. Your intuition is better than mine 🙂

One final question and this is really a user experience issue.. Ive tried adding the .menu class into the JS so that if a user tries clicking MENU it will toggle and "X" but no go.. It deactivates the toggle

Currently its functioning improperly (click "MENU" and youll see its NG) so i can remove MENU from that container so it no longer activates in anyway on hover or figure out how to include it in what you just did..

thoughts?

Report · Mar 06, 2025

It'll take some playing around with the CSS, but moving the .menu <div> inside the .hamburger <div> as a third sibling to the .top-bun and .meat elements seems to make the X and slide in functions work.

There are a few lingering CSS issues that should be fixable, coming in from the ".hamburger div" settings that should be easy enough to override.

Report · Mar 06, 2025

makes complete sense..

bingo:

https://pitchlab.net/

i just added :

.hamburger .menu {
width: 0px;
height:0px;
}

Thank you Jon!

using checkbox makes my overlay toggle not work..

2 Correct answers

Photos