Adding a link to custom header text

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!

Your site is private. Can you setup an access password & share url again? We can check easier

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 

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

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?

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

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>

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>

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 🙂

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>

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>

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?

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: 

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>

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!

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.