phob Posted August 17, 2022 Share Posted August 17, 2022 Site URL: https://chimes-bagpipe-e9t2.squarespace.com Hello! I added a custom title to my header but I would like it to link to the home page when it is clicked. This is the what I have in custom css: .header-nav:before { content: "FAT BABY"; display: block; position: relative; top: -30px; font-family: omnes-pro; font-weight: 900; font-size: 50px; } Any help is much appreciated! Link to comment
tuanphan Posted August 21, 2022 Share Posted August 21, 2022 Your site is private. Can you setup an access password & share url again? We can check easier 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
phob Posted August 29, 2022 Author Share Posted August 29, 2022 On 8/21/2022 at 1:30 AM, tuanphan said: Your site is private. Can you setup an access password & share url again? We can check easier Hi! Sorry for the late response, url: https://dove-coconut-yee5.squarespace.com and the password is phatbabi Link to comment
tuanphan Posted August 31, 2022 Share Posted August 31, 2022 With CSS pseudo :after or :before, no way to make it as link. You can add this new code to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<h3 class="tp-fat-baby"><a href="https://google.com">FAT BABY</a></h3>').appendTo('header#header'); }); </script> <style> h3.tp-fat-baby { content: "FAT BABY"; display: block; position: absolute; top: -30px; font-family: omnes-pro; font-weight: 900; font-size: 50px; left: 50%; transform: translateX(-50%); z-index: 9999; } </style> Replace google with new 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
phob Posted September 7, 2022 Author Share Posted September 7, 2022 Hi! Thanks for your reply but I still can't get it to link to my homepage. Also the text is now really off centre. I haven't yet purchased my website and am still using the free trial so I'm not sure if that is causing the problem? I know absolutely nothing about coding and this is my first attempt at making a website so I really appreciate the help. Is there not an option to have both my logo and title in my header? Or is coding the only way to fix this. Also an unrelated question but I'm not happy with the quality of the big photo of the strawberries and cherries under my header. What size should I make this image to stop the quality from reducing? Link to comment
tuanphan Posted September 8, 2022 Share Posted September 8, 2022 20 hours ago, phob said: Hi! Thanks for your reply but I still can't get it to link to my homepage. Also the text is now really off centre. I haven't yet purchased my website and am still using the free trial so I'm not sure if that is causing the problem? I know absolutely nothing about coding and this is my first attempt at making a website so I really appreciate the help. Is there not an option to have both my logo and title in my header? Or is coding the only way to fix this. Also an unrelated question but I'm not happy with the quality of the big photo of the strawberries and cherries under my header. What size should I make this image to stop the quality from reducing? The code doesn't work or you don't know how to add link on above code? With center, can you keep the code? We can check it again easier 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
phob Posted October 13, 2022 Author Share Posted October 13, 2022 I added the code in the footer but the text doesn't link to the homepage and it's not centre in the header. I bought my website so the url is now https://www.fatbaby.uk/ and the password is still phatbabi This is the code I added: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<h3 class="tp-fat-baby"><a href="https://www.fatbaby.uk">FAT BABY</a></h3>').appendTo('header#header'); }); </script> <style> h3.tp-fat-baby { content: "FAT BABY"; display: block; position: absolute; top: -30px; font-family: omnes-pro; font-weight: 900; font-size: 50px; left: 50%; transform: translateX(-50%); z-index: 9999; } </style> Link to comment
tuanphan Posted October 17, 2022 Share Posted October 17, 2022 On 10/14/2022 at 2:51 AM, phob said: I added the code in the footer but the text doesn't link to the homepage and it's not centre in the header. I bought my website so the url is now https://www.fatbaby.uk/ and the password is still phatbabi This is the code I added: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<h3 class="tp-fat-baby"><a href="https://www.fatbaby.uk">FAT BABY</a></h3>').appendTo('header#header'); }); </script> <style> h3.tp-fat-baby { content: "FAT BABY"; display: block; position: absolute; top: -30px; font-family: omnes-pro; font-weight: 900; font-size: 50px; left: 50%; transform: translateX(-50%); z-index: 9999; } </style> Try this new code. If it still doesn't work, keep new code, we will check it again <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<h3 class="tp-fat-baby"><a href="https://www.fatbaby.uk">FAT BABY</a></h3>').insertBefore('header#header'); }); </script> <style> h3.tp-fat-baby { content: "FAT BABY"; display: block; position: absolute; top: -30px; font-family: omnes-pro; font-weight: 900; font-size: 50px; left: 50%; transform: translateX(-50%); z-index: 9999; } </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
phob Posted October 17, 2022 Author Share Posted October 17, 2022 The title links, thank you so much! There are still a couple of issues with it though, sometimes when I refresh the page the title is perfectly aligned with the header menu but sometimes it moves to the right, same issue happens on mobile - I've included screenshots. The second issue is that the text is too big for my mobile header, could you make it so the title doesn't appear on the mobile version of the website please. Thank you again, really appreciate the help 🙂 Link to comment
tuanphan Posted October 22, 2022 Share Posted October 22, 2022 On 10/17/2022 at 11:29 PM, phob said: The title links, thank you so much! There are still a couple of issues with it though, sometimes when I refresh the page the title is perfectly aligned with the header menu but sometimes it moves to the right, same issue happens on mobile - I've included screenshots. The second issue is that the text is too big for my mobile header, could you make it so the title doesn't appear on the mobile version of the website please. Thank you again, really appreciate the help 🙂 Hi. Add this code under <style> @media screen and (max-width:767px) { h3.tp-fat-baby { display: none !!important; } } </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
Chelseys Posted March 21 Share Posted March 21 Hi, I'm trying to get the linked text on a single line above the nav-bar on desktop and at the top of the screen on mobile. Link to Page Currently working on. I can't provide login info, unfortunately. This is the code I currently have: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('<p class="survivor-support-line"><a href="tel:971-235-0021">24 Hour Survivor Support Line: 971-235-0021</a></p>').insertAfter('.header-title'); }); </script> <style> p.survivor-support-line { position: relative; display: block; font-family: work sans; color: #ED3345; font-style: normal; text-decoration: underline; text-align: right; }</style> Link to comment
tuanphan Posted March 25 Share Posted March 25 On 3/21/2024 at 9:15 AM, Chelseys said: Hi, I'm trying to get the linked text on a single line above the nav-bar on desktop and at the top of the screen on mobile. Link to Page Currently working on. I can't provide login info, unfortunately. This is the code I currently have: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('<p class="survivor-support-line"><a href="tel:971-235-0021">24 Hour Survivor Support Line: 971-235-0021</a></p>').insertAfter('.header-title'); }); </script> <style> p.survivor-support-line { position: relative; display: block; font-family: work sans; color: #ED3345; font-style: normal; text-decoration: underline; text-align: right; }</style> I see you solved with an image? 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
Chelseys Posted March 25 Share Posted March 25 13 hours ago, tuanphan said: I see you solved with an image? Yes, however it's very hard to read. Is there a way to use a different image on mobile? I'd like to use this one on mobile if possible: Link to comment
tuanphan Posted March 27 Share Posted March 27 Use this code under your code. Do you need to resize it a bit? <style> @media screen and (max-width:767px) { p.survivor-support-line img { content: url(https://content.invisioncic.com/p289038/monthly_2024_03/survivor-img.png.cd580a1041f9bc2f00948d34124d02ab.png); } } </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
Chelseys Posted March 27 Share Posted March 27 14 hours ago, tuanphan said: Use this code under your code. Do you need to resize it a bit? Thank you so much! I reduced the size a bit and it's perfect! tuanphan 1 Link to comment
tuanphan Posted March 31 Share Posted March 31 On 3/28/2024 at 6:02 AM, Chelseys said: Thank you so much! I reduced the size a bit and it's perfect! You're welcome. 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