Jump to content

Text in Header, Before Social Icons

Go to solution Solved by tuanphan,

Recommended Posts

Hi everyone,

 

I hope to find you well.

 

I am trying to add a text in the header, saying "CONTACT US :", just before/on the left of the links to the socials (upper right part of the website).

 

URL: https://global-queens.com

 

Any thoughts about a CSS?

 

Did my research, but did not find the solution.

 

My Heading is :

Font : Acumin Pro

Size : 16 Px

 

Would the code also apply for the mobile version (would like to get it centered and above the social icons).

 

Thanks a lot for your help!

 

Yours faithfully,


Alexandre

Link to comment

Add to Website Tools (under Not Linked) > Custom CSS

/* text before social */
.header-actions.header-actions--right .header-actions-action:before {
    content: "Contact Us:";
    position: relative;
    top: 5px;
    font-family: 'acumin-pro';
    font-size: 16px;
}

image.png.9f03c2568fdb2f273e7218b62bd5368d.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

 

On 10/21/2023 at 6:28 AM, tuanphan said:

Add to Website Tools (under Not Linked) > Custom CSS

/* text before social */
.header-actions.header-actions--right .header-actions-action:before {
    content: "Contact Us:";
    position: relative;
    top: 5px;
    font-family: 'acumin-pro';
    font-size: 16px;
}

image.png.9f03c2568fdb2f273e7218b62bd5368d.png

 

Hi tuanphan!

 

Thanks a lot for your reply!

 

Do you know how to rather move the "CONTACT US" link I have on the upper left of the page? At the same place;

 

Does it apply to mobile?

 

Thanks a lot!

 

Alexandre

 

 

Edited by AlexandreABC
Link to comment
  • Solution
On 10/22/2023 at 2:40 AM, AlexandreABC said:

 

 

Hi tuanphan!

 

Thanks a lot for your reply!

 

Do you know how to rather move the "CONTACT US" link I have on the upper left of the page? At the same place;

 

Does it apply to mobile?

 

Thanks a lot!

 

Alexandre

 

 

Upper left - Which position? Can you highlight & take a screenshot? 

With mobile, which position? Above instagram icon or?

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
  • 2 months later...
On 1/16/2024 at 4:34 PM, antasz said:

Hi Tuanphan,

I would also like to ask for your help.

Site: https://crow-grasshopper-6ssf.squarespace.com/
Password: farm5.0

I managed to put the text "Made by Farm Studio" in the header.
Which I can't solve, but I suspect it's not just CSS that needs to be "half" of the text link:
"Made by<a href="https://www.farm.co.hu" target="_blank">Farm Studio</a>"

Can you help me with this?

Thanks, 
a.

You mean make text "Farm Studio" clickable to farm.co.hu link?

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

CSS pseudo :before, :after can't add link, you can use this code to Last Line in Code Injection > Footer to add new text with jQuery code

<script>
  $(document).ready(function(){
    $('<p class="custom-text">Made by <a href="https://farm.co.hu/" target="_blank">Farm Studio</a></p>').appendTo('.header-display-desktop .header-actions.header-actions--right');
});
</script>
<style>
  p.custom-text {
    color: black;
}
</style>

image.png.3997c58c0637384a36847111d8530540.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.