Q:

fixed position only when a specific div is open

I'd like a "close menu icon (X) that only appears in the mobile menu.  I have to build the element and appended to the mobile menu.
example is here:
https://josh-unger-4lts.squarespace.com/
(There is no functionality for closing on the element yet)
I append with:
<script>
$(document).ready(function(){
 $('#block-yui_3_17_2_3_1513615238211_6445').appendTo('#mobileNav ');
 });
 </script>

I want my close element to have a fixed position only when the mobile nav is open.
My CSS for the (X) positioning:
 #block-yui_3_17_2_3_1513615238211_6445   {position: fixed; top: 0px; 
   right: 18px;
   margin-top: -5px;

}
I'm looking for a solution to have this closing (x) element only appear when the mobile menu is open instead of all the time.  

A:

There is already a style in your template that denotes if the mobile nav is open (.menu-open). Simply use that style the close button accordingly:
#mobileNav.menu-open #block-yui_3_17_2_3_1513615238211_6445 {
    position: fixed;
    top: 0px; 
    right: 18px;
    margin-top: -5px;
}

