How can I perform 2 checkbox actions at once w/ pure CSS?

I'm trying to make a pure CSS mobile menu, and I'm having trouble formatting the checkbox label.

I want the checkbox label to turn yellow AND the mobile menu to appear, but I can only get the menu.

I know the input tag only affects adjacent elements, but I've seen this working elsewhere.

Please help!

Here is my jsfiddle: https://jsfiddle.net/ichormosquito/wqzj36nh/15/

 <input id="menu-btn" type="checkbox"  /> 
        
        <label for="menu-btn" class="overlord">
    <span id="hamburger" class="hamb"  /></label>   
                    
        <ul id="mobmen">
            <li>HOME</li>
       <li>ABOUT</li>
        <li>CONTACT</li>
       <li>SHOP</li>
       <li>BLOG</li>
       
      </ul>



#menu-btn { visibility: hidden; position: absolute; }

#hamburger { background-color: blue;
      
      float: right; margin-right: 10px;  cursor: pointer;  background-size: 60px; width: 60px; height: 60px;
      }
      
      #menu-btn:checked + #hamburger {background-color: yellow;}
        
                
            #mobmen {
  display: none; 
  } 
  
        
    #menu-btn:checked ~ #mobmen {
  display: block;
}  
            
            
                
            #menu-btn:focus { outline: 0; }
        
            .mobilemenu a { color: #ffffff;}
             ul#mobmen {
    text-align: center;
    clear: both;
    
    line-height: 100px;
    font-family: 'brandon-grotesque';
    font-weight: 500;
    color: #ffffff;
    font-size: x-large; }
            
      ul#mobmen li {
            
    border-top: solid 2px #220000;
                background-color: #440000;
                }
            
            ul#mobmen li:hover {
            
                background-color: #660000;
                }
            
            ul#mobmen li:focus {
            
                background-color: #660000;
                }