Lex-Elin Posted February 20 Share Posted February 20 Hi I am starting a new website and I want to add a horizontal line across the top of the header - not a border, the line should be around 5% from the top, and above it I want to include a logo icon and language options, as I plan to make the site bi-lingual. On a separate note, I wonder if it's possible to have an image in the block beneath overlap the header on some pages? I have attached a photo of what I'm looking to create: Many thanks in advance! : Link to comment
Lex-Elin Posted February 20 Author Share Posted February 20 - I don't have a live domain linked to the site yet - but im building it here - https://hawk-arugula-et8r.squarespace.com/ Link to comment
tuanphan Posted February 21 Share Posted February 21 Your site is private, you can follow this to share correct url 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
Lex-Elin Posted February 29 Author Share Posted February 29 On 2/21/2024 at 1:31 PM, tuanphan said: Your site is private, you can follow this to share correct url Hi, I followed the instructions here and sent an email with the share password - did you get it? Thanks! Link to comment
tuanphan Posted March 2 Share Posted March 2 On 2/29/2024 at 7:26 PM, Lex-Elin said: Hi, I followed the instructions here and sent an email with the share password - did you get it? Thanks! I'm not sure, received a lot of message recently. If you haven't still respond from me, you can send again, or paste password here 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
Lex-Elin Posted March 5 Author Share Posted March 5 On 3/2/2024 at 9:24 AM, tuanphan said: I'm not sure, received a lot of message recently. If you haven't still respond from me, you can send again, or paste password here Password is: Llxk45Hu791 Link to comment
tuanphan Posted March 7 Share Posted March 7 Can you enable Language first? I can test code to move it to desired position And do you need language + logo icon only or language + logo + social icons on right? 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
Lex-Elin Posted March 8 Author Share Posted March 8 All of it if possible, including the horizontal line! I have enabled the other language Welsh (which is Cymraeg in Welsh). Thanks so much! Link to comment
tuanphan Posted March 10 Share Posted March 10 Try 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(){ $('.header-display-desktop .header-actions.header-actions--right').insertBefore('.header-display-desktop'); $('<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>').insertBefore('div#multilingual-language-picker-desktop'); }); </script> <style> @media screen and (min-width:992px) { .header-actions.header-actions--right { width: 100% !important; max-width: 100% !important; flex: 0 1 100% !important; border-bottom: 1px solid #fff !important; justify-content: flex-start; } .header-inner { flex-direction: column; } .header-title-nav-wrapper { margin: 0 auto; } .header-actions.header-actions--right>img { width: 50px; } } </style> 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
Lex-Elin Posted March 12 Author Share Posted March 12 Thanks for that! It's great, but, I don't want to use the google plug-in.I signed up for Weglot through the Squarespace trial... I need to link in that service - and hopefully that won't include featuring a logo that isn't ours. Link to comment
tuanphan Posted March 14 Share Posted March 14 You can replace Google image url with your own url or send me image url, I will adjust the code and send you 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
antasz Posted June 12 Share Posted June 12 Hi @tuanphan, I tried to apply your code independently but failed: https://okra-heron-ks3m.squarespace.com pass: pptest I've attached the image showing what I want to create (no need to worry about the colours): red bar without margin, with social icons on the right, with the extra extra logo (PP_LOGO_s_P%26P_logo_standard.png) that is now hanging in the air, in the red bar after the social icons. Can you help me with this, please! Thank you, Anita Link to comment
tuanphan Posted June 16 Share Posted June 16 On 6/12/2024 at 4:46 PM, antasz said: Hi @tuanphan, I tried to apply your code independently but failed: https://okra-heron-ks3m.squarespace.com pass: pptest I've attached the image showing what I want to create (no need to worry about the colours): red bar without margin, with social icons on the right, with the extra extra logo (PP_LOGO_s_P%26P_logo_standard.png) that is now hanging in the air, in the red bar after the social icons. Can you help me with this, please! Thank you, Anita You can follow this. 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