Jump to content

Adding text to the header instead of using a logo image

Recommended Posts

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? 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Susana_SQSP changed the title to Adding text to the header instead of using a logo image
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.