Adding text to header

Hi, I'm trying to add a line of text to my header, in the centre above my navigation menu but I can't work out how to add it. Is there any coding that I can use to be able to add text? 

Any help greatly appreciated. 

Can you share site url? We can check easier.

I also need to add a line of text to my header, above my navigation menu in 7.1... How can I do that?

gabriella.squarespace.com

On 10/21/2020 at 9:03 PM, karen.sale said:

I also need to add a line of text to my header, above my navigation menu in 7.1... How can I do that?

gabriella.squarespace.com

What is access password?

I've only just seen the reply. The website hasn't been published yet, I'm still in trial mode. I want to be able to add a line of text where the yellow line is....can you help with this or tell me the code?

On 11/12/2020 at 7:55 PM, Pinklady said:

I've only just seen the reply. The website hasn't been published yet, I'm still in trial mode. I want to be able to add a line of text where the yellow line is....can you help with this or tell me the code?

You can setup password & share url

https://cyan-spinach-z6xx.squarespace.com/

Password: Niche01

On 11/25/2020 at 3:40 AM, Pinklady said:

https://cyan-spinach-z6xx.squarespace.com/

Password: Niche01

Add to Home > Design > Custom CSS

.header-nav:before {
    content: "enter your text";
    display: block;
    position: relative;
    top: -50px;
}

Quote

.header-nav:before {
    content: "enter your text";
    display: block;
    position: relative;
    top: -50px;
}

Omg this helps me out so much thank you! I have a few quick questions: When I use that code, the texts margins stop at about 1/3 in from each side. How can I set it to fill the entire top of the screen?  How do I italicize the text? Finally, how do I add another section of text? I want to put some above and below the image I use for the banner

On 12/2/2020 at 11:28 PM, WaitthisisntReddit said:

Omg this helps me out so much thank you! I have a few quick questions: When I use that code, the texts margins stop at about 1/3 in from each side. How can I set it to fill the entire top of the screen?  How do I italicize the text? Finally, how do I add another section of text? I want to put some above and below the image I use for the banner

use

font-style: italic;

to add another text, use same code, replace :before with :after

Hello, 

I use this code - it works! How can I italicize only a part of my text (in my case like this: the delicious take away box) and show it in h3? and how can I make a line break after delicious? It would be great to get the code for this. 

Thanks a lot! 

On 12/2/2020 at 8:12 AM, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav:before {
    content: "enter your text";
    display: block;
    position: relative;
    top: -50px;
}

 

Amazing!!! Thank you soooooooo much for your help. One last question....how can I use the custom font that I have uploaded?

Many thanks

On 12/11/2020 at 3:01 AM, Pinklady said:

Amazing!!! Thank you soooooooo much for your help. One last question....how can I use the custom font that I have uploaded?

Many thanks

If you added @font-face code, next use this

.header-nav:before {
    content: "enter your text";
    display: block;
    position: relative;
    top: -50px;
	font-family: yourfontname;
}

Replace yourfontname with name you declared in font-face code.

On 12/4/2020 at 1:04 AM, tuanphan said:

use

font-style: italic;

to add another text, use same code, replace :before with :after

How do I add a third section of text? When I try to add the code again, it reads the last section and skips any of them in between. I tried changing the text to :during , :middle , etc but I cant get it to recognize a third section of text

@WaitthisisntReddit

Please post the URL to the page where you want to apply these effects.

I'm not sure exactly what you are trying to achieve so if you could provide more detail that would help.

There are no ::during or ::middle pseudo elements only ::before and ::after.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Thanks I've used this code and it works a dream! I'm just wondering how I get the text to be over to the right in line above the button?

On 1/21/2021 at 6:47 AM, MckM said:

Thanks I've used this code and it works a dream! I'm just wondering how I get the text to be over to the right in line above the button?

Hi. Can you share site url? We can help easier

We have a similar issue to @MckM

The strapline aligns nicely above the primary navigation, but not above the social links which now are midway between the two lines.

Before adding the strapline the social links looked like a continuation of the primary navigation and were on the same line as it, which looks good.

How can we move Twitter and Facebook down to the same line as the rest of the primary navigation, and then align the strapline right with the F of Facebook?

The site is https://westendinschools.org.uk and the custom CSS is:

.header-nav:before {
  content: "Every child's imagination should be inspired by the arts";
  display: block;
  position: relative;
  font-size: 16px;
  color: white;
  font-style: italic;
  margin-top: 15px;
  margin-bottom: 15px;
  font-weight: normal;
  text-align: right;
}

Thanks for your help.

On 4/17/2021 at 9:10 PM, nigel1808 said:

We have a similar issue to @MckM

The strapline aligns nicely above the primary navigation, but not above the social links which now are midway between the two lines.

Before adding the strapline the social links looked like a continuation of the primary navigation and were on the same line as it, which looks good.

How can we move Twitter and Facebook down to the same line as the rest of the primary navigation, and then align the strapline right with the F of Facebook?

The site is https://westendinschools.org.uk and the custom CSS is:

.header-nav:before {
  content: "Every child's imagination should be inspired by the arts";
  display: block;
  position: relative;
  font-size: 16px;
  color: white;
  font-style: italic;
  margin-top: 15px;
  margin-bottom: 15px;
  font-weight: normal;
  text-align: right;
}

Thanks for your help.

Hi. Where is social icons?

9 hours ago, tuanphan said:

Hi. Where is social icons?

Just above and to the right of the word ABOUT in the screen shot?

@tuanphan Is there a way to add different text to your nav header for each page on your site?

On 4/19/2021 at 5:10 PM, nigel1808 said:

Just above and to the right of the word ABOUT in the screen shot?

Sorry for the delay. Do you still need help?

Can you share site url? WE can check easier

Hi! This code has been super helpful as I am not at each wiz by any means. I was able to add the text “BEE Safe & Smart” to the header of my website beeezapiary.com HOWEVER I would like for the text to stretch across the header as opposed to its current stacked position. Is this possible? Thanks in advance!

On 7/12/2021 at 3:29 AM, AllyRose said:

Hi! This code has been super helpful as I am not at each wiz by any means. I was able to add the text “BEE Safe & Smart” to the header of my website beeezapiary.com HOWEVER I would like for the text to stretch across the header as opposed to its current stacked position. Is this possible? Thanks in advance!

Hi. I don't see BEE Safe & Smart.

You mean BEE Safe & Services? Make it in one line?

On 12/2/2020 at 2:12 AM, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav:before {
    content: "enter your text";
    display: block;
    position: relative;
    top: -50px;
}

 

Hi! this worked for me however it doesn't show anywhere on the mobile site. 😞 can I fix that?