How do I add things to the header that will show up on both web and mobile versions

Hi all,

I'm trying to add a 3rd party cart and login widget that will appear in the top right of both the mobile and desktop versions of my squarespace page: https://platinum-bamboo-58gw.squarespace.com/

I've successfully added it but realized the code only targets and appends to the header.actions of the desktop version of the site. The mobile version does not get it added. The tricky part is the cartNode and accountNode can only be instantiated once.

Any ideas on what might be the best workaround to have it stay in the top right of the screen on both mobile and desktop versions? I tried finding the name of the header.actions area on mobile but it seems like it has the same name as the desktop version so am not sure how to target and append into it.

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

<!-- 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 accountNode = document.createElement('div')
    accountNode.id = 'c7-account'
    node.appendChild(accountNode)
    
    var cartNode = document.createElement('div')
    cartNode.id = 'c7-cart'
    node.appendChild(cartNode)
    
    var navBar = document.querySelector('.header-actions.header-actions--right');
      
    navBar.appendChild(accountNode)
    navBar.appendChild(cartNode)

Try change this line

.header-actions.header-actions--right

to

.header-actions

Hi @tuanphan thanks for the quick response!

I input those changes but it looks like it hasn't changed anything on the mobile version. The desktop version looks the same at least!

Another idea I had was to make the page reload when the resolution drops to a mobile version and try to reinstancate the widgets in the mobile header. I tried appending it to .header-display-mobile but was not successful.

Do you have any other ideas? I'll see if I can try something else!

Thanks,

-Nick

Hi @tuanphan,

I tried using this code snippet from another users question that you answered. It is successful in adding a square space button on mobile but the cart and login widget still won't show up. 

Again here is the site: https://platinum-bamboo-58gw.squarespace.com/

@media screen and (max-width:767px) {
.header-actions.header-actions--right {
    display: block !important;
}

.header-actions-action.header-actions-action--cta {
    display: block;
}

.header-title-nav-wrapper {
    flex: 1 0 calc(~"100% - 150px") !important;
}
}

Any ideas why it would apply to the button in header actions right but not the widgets I instantiated?

@tuanphan Okay made some slight progress, I made it target ".header-inner.container--fluid" instead of ".header-actions" and now it will instantiate in on both desktop and mobile versions of the site. But it makes the middle header logo or menu no longer be on center and the cart and login widgets are compressed like they have zero width. Here are some photos, the website link is the same.

Is this a potential fix or do I need to have it in header-actions in order to get some symmetry?

Now you want to move these down?

Hi @tuanphan

I was able to get it to show up on Mobile by placing it in a popup using the following code. Ideally I could keep it in .header--actions since right now it doesn't stay centered when floating above the header but I couldn't get it to add to both mobile and desktop versions of .header--actions. Can you think of any solutions to doing it without a popup?

Else I may try to code the popup so it dynamically moves to stay in line with the rest of the header items.

Thanks,
-Nick

<style>
    /* Styles for the popup container */
    .popup-container {
      position: fixed;
      top: 15px; 
      right: 20px; 
      background-color: transparent;
      padding: 10px;
      border-radius: 5px;
      z-index: 1000; /* Ensure the popup stays above other elements */
      display: flex;
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
    }
</style>

<!-- Adds Commcerce7 widgets for the cart and customer account login -->
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(event) {
    var node = document.createElement('div')
    node.className = 'popup-container';
    
    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 navBar = document.querySelector('.header-inner.container--fluid');
      
    navBar.appendChild(node)
      
    })
</script>