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

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.

Need help with this exact same issue too.

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;
}

Is there a way to align the site title to the left corner separately from the center aligned logo and navigation?

Thanks

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;
}

That didn't work. 

Thanks for the help

On 3/12/2020 at 4:24 AM, JoeW said:

That didn't work. 

Thanks for the help

Can you share link to your site?

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

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?

20 hours ago, tuanphan said:

Do you use Personal Plan or higher?

Business plan (although the site I’m working on this for is in trial mode).

On 3/12/2020 at 7:55 AM, 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;
}

 

it works thank you

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!

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;

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?

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;
}

5 hours ago, tuanphan said:

Add to Design > Custom CSS

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

 

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

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;
}

8 hours ago, tuanphan said:

Try this new code

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

 

Worked, thanks!

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;
}

@Wanderlust123

Use the value pinot-grigio-modern for the font-family property.

Let us know how it goes.

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?

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

On 6/8/2021 at 8:27 AM, tuanphan said:

Try this new code

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

 

You can also change the class to collection-type-events to target event pages.

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.

3 hours ago, Wanderlust123 said:

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.

Please see Sharing URLs from your site.