Claire_Persist

Thank you! I had come across that post before I had much experience playing around on the backend, and couldn't get it to work. Now it made a ton more sense, and I got it to work! Thank you!!!!!!

I am attempting to add a secondary button to my unpublished site. The button appears how I'd like it, however, it does not appear to be a part of the header. It is adopting the background of the section directly below, and mobile is a mess. I'd appreciate any and all help. Code Injection: <script> document.addEventListener('DOMContentLoaded', function() { // Select the header element. Adjust based on your specific template. var header = document.querySelector('header') || document.querySelector('.Header'); // Check if the header exists if (!header) { console.error('Header not found'); return; } // Create the secondary button var secondaryButton = document.createElement('a'); secondaryButton.href = '#'; // Update with your desired URL secondaryButton.textContent = 'Log In'; // Text for the button secondaryButton.className = 'custom-secondary-button'; // Add a class for styling // Append the secondary button to the header header.appendChild(secondaryButton); }); </script> Custom CSS: .custom-secondary-button { display: inline-block; margin-left: 0px; /* Adjust spacing as needed */ padding: 0 30px; /* Increased horizontal padding for a wider button */ border: 1px solid #F08E80; /* Border style */ color: #F08E80; /* Text color */ text-decoration: none; font-weight: normal; border-radius: 5px; /* Rounded corners */ background-color: transparent; /* No background color */ font-size: 0.75em; /* Font size */ line-height: 47px; /* Match the button's height for vertical centering */ min-height: 0; /* Remove any minimum height restrictions */ height: 46px; /* Explicit height setting */ margin-top: 0px; /* Adjust to align vertically with the primary button */ font-family: 'Kepler Std', serif; /* Set the font to Kepler Std */ white-space: nowrap; /* Prevents text from wrapping */ } .custom-secondary-button:hover { background-color: #F08E80; /* Background color on hover */ color: #0B0D5F; /* Text color on hover */ } header { display: flex; justify-content: space-between; align-items: center; /* Vertically center items in the header */ margin-right: 30px; /* Space from the right edge */ }