Commerce7 Cart Missing from Mobile

I have code injection from Commerce7 for a cart button on my site www.wineclubhub.com
The only issue we are having is that they do not show on Mobile. What coding do I need to add to get it to show up?

Here's the current code injection:

<!-- Adds Commcerce7 widgets for the cart and customer account login -->
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(event) {
    var node = document.createElement('div')
    
    var cartNode = document.createElement('div')
    cartNode.id = 'c7-cart'
    node.appendChild(cartNode)
    
    var navBar = document.querySelector('.header-actions.header-actions--right');
      
    navBar.appendChild(cartNode)
      
    })
</script>

Try this code under

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  	$('div#c7-cart').clone().appendTo('.header-display-mobile .header-actions.header-actions--right');
  });
</script>
<style>
  div.header-display-mobile .header-actions.header-actions--right {
    display: flex !important;
    position: relative;
    left: -5vw;
}
</style>

Still didn't work, but appreciate the help!

On 9/4/2024 at 8:20 PM, Shelbyyyyy said:

Still didn't work, but appreciate the help!

Try this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
     setTimeout(function() {
 $('div#c7-cart').clone().appendTo('.header-display-mobile .header-actions.header-actions--right');
  }, 2000);
  	
  });
</script>
<style>
  div.header-display-mobile .header-actions.header-actions--right {
    display: flex !important;
    position: relative;
    left: -5vw;
}
</style>