LocalPlantSupply

@tuanphanit is localplantsupply.com , its noticeable in places such as localplantsupply.com/chat where you can see its to the left of the Rosie Rostrata icon we have below. Password is known

Not sure why, logo is off center to the left. Here is my site wide CSS. I did recently add the mobile burger menu functionality to the desktop, but not sure when this started since it's only subtly to the left and only noticeable when something that is correctly centered is below the logo. It doesn't matter if the burger menu is hidden or not as it happens on all pages. Password is known . Here's my CSS for the site: //BREAK POINTS @mobile: ~"only screen and (max-width: 949px)"; @desktop: ~"only screen and (min-width: 950px)"; .header .header-burger{display:flex}.header-nav, .header-actions {display:none} @media only screen and (min-width: 640px){.header--menu-open .header-menu { opacity: 1; visibility: visible; width: 30%; height: 60%; margin-left: 70%; box-shadow: -5px 5px 15px #000}} //FONT UPLOAD @font-face { font-family: PICK-NAME; src: url(FONT FILE URL) } .header-nav-folder-item:hover { a{color: #4a4fd9 !important;} } body.header--menu-open .btt { display: none !important; } @media (max-width: 768px){.header-menu-cta .theme-btn--primary.btn.sqs-button-element--primary{ padding: .1em 1em !important; font-size: 26px !important; border-radius: 100px !important; margin-top: .01px !important; margin-bottom: .01px !important; /* Reduces the space between items */ margin-left: auto !important; margin-right: auto !important; width: 250px !important; align-items: center; justify-content: center; /* Center horizontally */ flex-wrap: wrap; /* Allow items to wrap if needed */ text-align: center; } div.container.header-menu-nav-item>a { color: #fff !important; background-color: #686beb !important; padding: .1em 1em !important; font-size: 26px !important; border-radius: 100px !important; margin-bottom: .01px !important; /* Reduces the space between items */ margin-left: auto !important; margin-right: auto !important; width: 200px; align-items: center; display: flex; justify-content: center; /* Center horizontally */ flex-wrap: wrap; /* Allow items to wrap if needed */ text-align: center; } } @media (min-width: 768px){.header-menu-cta .theme-btn--primary.btn.sqs-button-element--primary{ padding: .1em 1em !important; font-size: 26px !important; border-radius: 100px !important; margin: 1px 1 !important; /* Adjust vertical margins */ margin-left: auto !important; margin-right: auto !important; width: 250px !important; align-items: center; flex-wrap: wrap; /* Allow items to wrap if needed */ gap: 1em; /* Adjust the gap between flex items if needed */ text-align: center !important; } div.container.header-menu-nav-item>a { color: #fff !important; background-color: #686beb !important; padding: .1em 1em !important; font-size: 26px !important; border-radius: 100px !important; margin: 10px 0 !important; /* Adjust vertical margins */ margin-left: auto !important; margin-right: auto !important; width: 200px; align-items: center; display: flex; justify-content: center; /* Center horizontally */ flex-wrap: wrap; /* Allow items to wrap if needed */ text-align: center !important; } } /* Ensure button is visible on mobile by default */ .expand-widget { display: inline-block; /* Adjust as necessary */ background: none; border: none; cursor: pointer; } header#header { background: #FFFFFF !important; /* Sets the background to white */ } /* Hide button on screens wider than 768px */ @media (min-width: 768px) { .expand-widget { display: none; } } }

I'm trying to set the subject field of a Squarespace form from a script, I verified that the subjectInput is valid, and I verified that the tree name is properly being fetched. (Model ID from URL parameter > Sketchfab API Model Name) But the string simply isn't setting, I don't see it visibly in the form itself, nor is it being sent in the final email after I click submit. I'm placing this in the Advanced Code section of the page. Here's the exact URL, password is known: https://www.localplantsupply.com/tree-d-viewer?model=ac03983731014985b3998918dbb72f8e&images=https%3A%2F%2Fimages.squarespace-cdn.com%2Fcontent%2F63a30291e92dbc66a89327f8%2Fc1dbe4d3-841b-42b0-a250-c82befc9a8db%2Fyucca1.jpg%2Chttps%3A%2F%2Fimages.squarespace-cdn.com%2Fcontent%2F63a30291e92dbc66a89327f8%2F46b707f7-7c83-4eb0-ad4d-5d84fcdf7e30%2Fyucca2.jpg%2Chttps%3A%2F%2Fimages.squarespace-cdn.com%2Fcontent%2F63a30291e92dbc66a89327f8%2F69de31c1-556c-409f-bbe3-5b380c493af8%2Fyucca3.jpg <script> document.addEventListener("DOMContentLoaded", function() { var buyButton = document.getElementById('block-yui_3_17_2_1_1710424833282_7130'); var form = document.getElementById('block-yui_3_17_2_1_1710417003580_7008'); var subjectInput = document.getElementById('text-yui_3_17_2_1_1710417041309_2398-field'); async function fetchTreeName() { const modelId = new URLSearchParams(window.location.search).get('model'); if (modelId) { const modelDetailsUrl = `https://api.sketchfab.com/v3/models/${modelId}`; try { const response = await fetch(modelDetailsUrl); if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`); const modelData = await response.json(); return modelData.name; // Assuming this is where the tree name is stored } catch (error) { console.error('Error fetching model details:', error); return "Unknown Tree"; } } } function changeValue(input, value) { var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set; nativeInputValueSetter.call(input, value); var inputEvent = new Event("input", { bubbles: true }); input.dispatchEvent(inputEvent); } buyButton && buyButton.addEventListener('click', async function(event) { event.preventDefault(); const treeName = await fetchTreeName(); const inquiryDate = new Date().toISOString(); console.log(treeName); form.style.display = form.style.display === "none" || form.style.display === "" ? "block" : "none"; if(subjectInput) { console.log("Subject is valid"); changeValue(subjectInput, `Inquiry for ${treeName} - ${inquiryDate}`); } }); }); </script>

@Ziggystrangely switching it back to visibility:hidden has now fixed my issues. *shrugs*

@Ziggymy logo on desktop and mobile is still off center with the following CSS: <style> .burger-box , .header-burger , .header-nav , .sqs-button-element--primary { display:none !important; } </style> I am going to switch it back to visibility:hidden temporarily as I'd rather have it invisible and clickable than an off center logo until I have a working fix. On desktop it shifts to the left, on mobile it shifts to the right. I tried a few things from other forum posts here but none are working for me. Thanks in advance!

Its working in desktop as desired but on mobile when clicked there's no left right arrows that indicate you can go to the next image, nor is the metadata with the tree details visible once clicked into the image. Here's one of a few examples from the website, password is known https://www.localplantsupply.com/fresh-feed-landscape-professionals

@Ziggyfor some reason when I do this, the header on the desktop version ends up shifting further left so the logo is now off center.

Currently if I click the top right corner even when the menu is hidden, it still allows the user to click it and enter the burger menu. localplantsupply.com Password is known

@sasankayyodI got here because my Sketchfab embed was cropping, what worked for me was custom CSS that set the width and height based off the ID of the code block. <style> .sketchfab-embed-wrapper iframe { width: 100%; height: 500px; /* or any other height */ } </style>

@tuanphanthanks, what about for the mobile menu?

I want the tabs "Fresh Feed" and "Markets" in top left to have a blue background like "Source Plants" does. localplantsupply.com/landscape-professionals-home Password is known

I want the header button here: https://www.localplantsupply.com/landscape-professionals-home To go here: https://www.localplantsupply.com/landscape-professionals-survey Password is known