fixed position only when a specific div is open

Question

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.

Answer 1

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