Jump to content

Adding a link to custom header text

Recommended Posts

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
  • Replies 15
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

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

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
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
  • 1 month later...

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
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

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 🙂

311984299_1250721975470782_3293213044897747276_n.png

312190832_1853503681666589_5589915484538893233_n.png

311947962_468936598546963_3355461133272452007_n.jpg

311906492_849084313196674_839823934147054378_n.jpg

Link to comment
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 🙂

311984299_1250721975470782_3293213044897747276_n.png

312190832_1853503681666589_5589915484538893233_n.png

311947962_468936598546963_3355461133272452007_n.jpg

311906492_849084313196674_839823934147054378_n.jpg

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
  • 1 year later...

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>

 

Untitled2.png

Untitled.png

Link to comment
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>

 

Untitled2.png

Untitled.png

I see you solved with an image?

image.png.2cb1c2568b9fded8c1ee350aa766a430.png

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

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>

image.png.213f0bed5ed9c9c601becb06438cca04.png

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.