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>