Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

How Can I Show Both Site Title and Logo in Header?


WeAcceptCrypto

Question

Recommended Posts

  • 0
On 3/9/2020 at 5:00 AM, WeAcceptCrypto said:

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

Squarespace defaults to showing either the site title or the site logo, but I want to show both in my Header. Is there a way to add this functionality with CSS? I have searched the forums and various other online tutorials and I can't seem to find anyone who's successfully done this on a Squarespace site.

 

3 hours ago, JoeW said:

Need help with this exact same issue too.

Add to Home > Design > Custom CSS

.header-title-logo a:after {
    content: "Site Title";
    display: block;
    font-size: 20px;
    font-family: monospace;
    color: green;
    text-align: center;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

I attempted this, but couldn't get what I want.

What I'm aiming for us the logo on the left, with left-justified site title and sub-title (in different fonts) vertically centred to the right of the logo... something like the image attached.

Is this even possible?

kenhardie.squarespace.com 

password: fpk

squarespace site title and logo.jpg

Edited by XianNewman
add url

8a. Side by side - Horizontal With Google Cloud (Squarespace Circle Profile).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to comment
  • 0
On 10/20/2020 at 1:31 AM, XianNewman said:

I attempted this, but couldn't get what I want.

What I'm aiming for us the logo on the left, with left-justified site title and sub-title (in different fonts) vertically centred to the right of the logo... something like the image attached.

Is this even possible?

kenhardie.squarespace.com 

password: fpk

Do you use Personal Plan or higher?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 3/11/2020 at 1:55 PM, ukdesigner said:

Try this CSS:

 


.header-title-logo a:after {
    content: "Site Title";
    display: inline-block;
    font-size: 24px;
    font-family: Poppins;
    color: black;
    text-align: center;
    vertical-align:middle;
    font-weight:900;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}

 

Hi @ukdesigner

This works great, thank you! Is there a way to make the site title appear UNDERNEATH the logo (but keep everything else in your code the same)?
Thanks so much!

Link to comment
  • 0
On 3/5/2021 at 2:53 AM, jclick said:

Hi @ukdesigner

This works great, thank you! Is there a way to make the site title appear UNDERNEATH the logo (but keep everything else in your code the same)?
Thanks so much!

change this line

display: inline-block;

to

display: block;

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Here's the code I wound up using, that did the trick:

// header title
.header-title-logo a:after {
    content: "JOHN ALDAG";
    display: inline-block;
    font-size: 24px;
    font-family: Lato;
    color: white;
    text-align: center;
    vertical-align:middle;
    font-weight:900;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}

@tuanphan My only question is, how would I make it a different font colour on blog item pages only?

8a. Side by side - Horizontal With Google Cloud (Squarespace Circle Profile).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to comment
  • 0
On 6/5/2021 at 10:53 PM, XianNewman said:

Here's the code I wound up using, that did the trick:


// header title
.header-title-logo a:after {
    content: "JOHN ALDAG";
    display: inline-block;
    font-size: 24px;
    font-family: Lato;
    color: white;
    text-align: center;
    vertical-align:middle;
    font-weight:900;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}

@tuanphan My only question is, how would I make it a different font colour on blog item pages only?

Add to Design > Custom CSS

body[class*="collection-type-blog"] .header-title-logo a:after {
	color: red !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 6/7/2021 at 8:59 PM, XianNewman said:

I don’t want to change the colour on the blog page itself; only blog item pages.

Try this new code

body[class*="collection-type-blog"].view-item .header-title-logo a:after {
	color: red !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

I used the code given above and it worked almost perfect but how can I change the font to "Pinot Grigio Modern"?  I tried replacing "Lato" for "Pinot Grigio Modern" but nothing happens.  Also, the logo ended up on the left of the title (which I wanted) but not aligned with it, it moved up a little. Can someone help me with this?  Thanks. I pasted below the code I used:

// header title
.header-title-logo a:after {
    content: "JOHN ALDAG";
    display: inline-block;
    font-size: 24px;
    font-family: Lato;
    color: white;
    text-align: center;
    vertical-align:middle;
    font-weight:900;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}
Edited by Wanderlust123
Link to comment
  • 0
5 hours ago, Wanderlust123 said:

Thank you very much!!!! I wasn't including the dashes.  Worked perfectly!!!

Do you know what code I would need to make the logo and title appear together when on the mobile version?

Can you share link to your site? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 6/14/2021 at 5:26 AM, tuanphan said:

Can you share link to your site? We can check easier

I'm a newbie here.  I'm trying but can't figure out how to copy the link so that the squarespace login doesn't appear for you.  

When I go into the mobile version, only the logo appears.

 

Edited by Wanderlust123
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...