Barbi Posted May 28 Share Posted May 28 Hi, I would like to add this phone number: 1800 077 833 next to the header button like in the image attached. Website: https://asparagus-arugula-2dfm.squarespace.com/ password: 1234 Thanks! Link to comment
WCS Posted May 28 Share Posted May 28 (edited) @Barbi You can do this by adding another button to the header! Here's a tutorial: https://bycrawford.com/blog/enable-two-buttons-in-header-squarespace If you want it to not look like a button (like the sample you shared), you can style the background to be white. Edited May 28 by WCS Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) Link to comment
Barbi Posted May 28 Author Share Posted May 28 Thank you for your response! I need to have both the button and the number next to it, I circled it in this screenshot. The screenshots are from my client's old website, the new website on squarespace needs the phone next to the button not replacing the button. Thanks! Link to comment
tuanphan Posted May 31 Share Posted May 31 To add phone number before Header Button, you can follow these steps #1. Use this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('<a href="tel:1800077833" class="header-phone btn btn--border theme-btn--primary-inverse sqs-button-element--primary">1800 077 833</a>').insertBefore('a.btn'); }); </script> You will have #2. Use this code to Website Tools > Custom CSS a.header-phone { background-color: transparent !important; color: #314972 !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Barbi Posted May 31 Author Share Posted May 31 thank you for your response, it worked! there is just a detail, the button cuts on the right side, is there a way to move it a bit to the left? Thanks! Link to comment
Solution tuanphan Posted June 2 Solution Share Posted June 2 On 6/1/2024 at 12:11 AM, Barbi said: thank you for your response, it worked! there is just a detail, the button cuts on the right side, is there a way to move it a bit to the left? Thanks! Use this to Custom CSS div.header-display-desktop .header-title-nav-wrapper { flex: 1 0 64% !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment