How do I layer Commerce7 icons on top of my header?

Site URL: https://wines-by-gmd.squarespace.com/

I am building a site that is integrating Commerce7. The 'cart' and 'account' functionalities require a code block to pull those icons into the site. They currently live on the homepage (although I'd ideally like them to live in the code injection so they appear across the site) so I could figure out how to move them into the proper position. While I have figured out how to move them, they currently sit below the header and I can't figure out how to make them sit on top of the header. z-index does not seem to be interested. Any thoughts would be greatly appreciated. 

Site: https://wines-by-gmd.squarespace.com/
p/w: wines22 

The password isn't working.

19 minutes ago, paul2009 said:

The password isn't working.

Apologies, password is wines2022

17 hours ago, paul2009 said:

The password isn't working.

Hey @paul2009 any chance you got a peak at this yet?
Again, the password is wines2022

Thanks in advance

On 8/11/2022 at 2:02 AM, SundayRoast said:

Apologies, password is wines2022

Do you still need help on this?

Site URL: https://portreecellars.com

I am trying to display two icons in the header (Login and cart) that are linked directly to our point of sale system (Commerce7). I have added commerce7's recommended code injection to get the Login/cart icons to display, however they display beneath the main site navigation. I uploaded a picture of what is currently happening and what I want to happen (all icons displayed in a single row, right aligned). Any help would be much appreciated.

password: portree

Current CSS code injection is as follows:

<!-- Adds the Commerce7 styles -->
<link href="https://cdn.commerce7.com/v2/commerce7.css" rel="stylesheet">

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(event) {
      var node = document.createElement('div')
      node.id = 'c7-tools'

      var accountNode = document.createElement('div')
      accountNode.id = 'c7-account'
      node.appendChild(accountNode)

      var cartNode = document.createElement('div')
      cartNode.id = 'c7-cart'
      node.appendChild(cartNode)

      var header = document.getElementsByClassName('header-nav-item')[4]
     header.appendChild(node)
  })
  

</script>

<script type="text/javascript" 
        src="https://cdn.commerce7.com/v2/commerce7.js" 
        id="c7-javascript" 
        data-tenant="louise-bernhard-wine">
</script>

<style type="text/css">
  
  /* ----- Header ------ */
  header {
      display: flex;
    align-items: center;
  }

  header #c7-tools {
      display: flex;
    justify-content: space-between;
    align-items: center;
    
  } 
</style>

Can you keep icons? We can check easier

I don't see any icons now

Can someone share the solution to this?  I'm wondering the same thing.  Thank you