Skip to main content
R
REELHERO
Inspiring
March 4, 2025
Answered

using checkbox makes my overlay toggle not work..

  • March 4, 2025
  • 2 replies
  • 787 views

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

 

    Correct answer Jon Fritz

    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?


    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.



    2 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    March 5, 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).

      R
      REELHEROAuthor
      Inspiring
      March 5, 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 class="menu_container" id="toggle">

      <div class="hamburger">
      <div class="top-bun"></div>
      <div class="meat"></div>
      </div>
      <div class="menu">menu</div>

      </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 class="menu_container" id="toggle">
      <input type="checkbox" id="checkbox_burger" class="checkbox_burger visuallyHidden">
      <label for="checkbox_burger">
       
      <div class="hamburger">
      <div class="top-bun"></div>
      <div class="meat"></div>
      </div>
      <div class="menu">menu</div>
      </label>
       
      </div>

       

       

       

      Jon Fritz
      Community Expert
      Jon FritzCommunity Expert
      Community Expert
      March 6, 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...

      <body>
         <input type="checkbox" id="checkbox_burger" class="checkbox_burger visuallyHidden">
         <div class="menu_container" id="toggle">
            <label for="checkbox_burger">
               <div class="hamburger">
                  <div class="top-bun"></div>
                  <div class="meat"></div>
               </div>
               <div class="menu">menu</div>
            </label>
      </div>


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




        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        March 4, 2025

        Browser Inspect (F12), Console:

         

        Working page:

         

        Non-working page:

         

        Nancy O'Shea— Product User & Community Expert
          R
          REELHEROAuthor
          Inspiring
          March 5, 2025

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

           

          https://pitchlab.net/checked_test.html

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices