Adding text to the header instead of using a logo image

Site URL: https://www.richardsaltermusic.com/

Hi all!

I wanted to have my name & job description at the very top of my site header, which I've done.

However, I had to find a workaround of taking a screenshot of the text then uploading it as a logo. As Mac screenshots are not that HQ, I can see a slight decrease in quality compared to the text on the rest of the site. I'd like to be able to replace this with actual text, so that it's better quality. I'm also told that from an SEO perspective, it's going to be better to have text there instead.

Anybody know of a way to do this please?

Thanks in advance!

x

@bangank36 Might you have any idea how to do this please? 

Do you still need help?

Hey @tuanphan!

There's only one thing I need on that section now:

Could you give me a code so I can have control of font size on the top text "Richard Salter" please?

Thanks in advance! x

@tuanphan

Here's the other thread with all the info in:

It's all at the bottom...

Thanks!

22 hours ago, skeebodelta said:

Hey @tuanphan!

 

There's only one thing I need on that section now:

Could you give me a code so I can have control of font size on the top text "Richard Salter" please?

Thanks in advance! x

Use this CSS

a#site-title {
    font-size: 40px;
}

Thanks @tuanphan

This is great, it worked perfectly!

Is there a way to close the space between the "Record Producer - Composer" text & the navigation items directly below?

Thanks in advance!

x

20 hours ago, skeebodelta said:

Thanks @tuanphan

 

This is great, it worked perfectly!

 

Is there a way to close the space between the "Record Producer - Composer" text & the navigation items directly below?

 

Thanks in advance!

 

x

 

 

Use this code

/* space site title nav */
.header-nav {
    margin-top: 0px !important;
}
.header-nav:before {
    display: none !important;
}

Thanks @tuanphan

Yes, this worked too!

The two top lines of text are tiny on mobile view. Is there a way to have control of the text size please?

Thanks! x

On 12/16/2021 at 5:17 PM, skeebodelta said:

Thanks @tuanphan

Yes, this worked too!

The two top lines of text are tiny on mobile view. Is there a way to have control of the text size please?

Thanks! x

 

 

It looks like you used image for mobile logo. You want to increase mobile logo size, or add logo with text, similar desktop?

Hi@tuanphan

I want to have "Richard Salter Record Producer - Composer" as text on mobile, so it looks the same as desktop.

Thanks! x

On 12/19/2021 at 4:23 PM, skeebodelta said:

Hi@tuanphan

I want to have "Richard Salter Record Producer - Composer" as text on mobile, so it looks the same as desktop.

 

Thanks! x

 

 

Don't remove any code in your current code.

Add this to Design > Custom CSS

/* Mobile header */
@media screen and (max-width:991px) {
.header-title-text {
    display: block !important;
    text-align: center;
}
a#site-title:after {
    font-size: 24px;
}
.header-mobile-logo {
    display: none !important;
}
}

Thanks @tuanphan

This worked well, thank you! x

 @tuanphan

Thanks for your help on this, it's much appreciated!

I'd like to have control of the size of the very top text "Richard Salter" when on mobile.

Is there a code for this please?

x

@bangank36

Might you have any idea how to do this please? 

"I'd like to have control of the size of the very top text "Richard Salter" when on mobile."

3 hours ago, skeebodelta said:

@bangank36

 

Might you have any idea how to do this please? 

 

"I'd like to have control of the size of the very top text "Richard Salter" when on mobile."

You can try

@media only screen and (max-width: 767px) {
  a#site-title {
    font-size: 35px;
  }
}

@bangank36

It worked, thanks! x