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

I think you're helping me out in a couple other coding questions 🙂  Thank you very much

Here is the link again

https://dalmatian-flugelhorn-6yx4.squarespace.com

password: site123

14 hours ago, Wanderlust123 said:

I think you're helping me out in a couple other coding questions 🙂  Thank you very much

Here is the link again

https://dalmatian-flugelhorn-6yx4.squarespace.com

 

password: site123

Don't remove any code.

Add this to Design > Custom CSS

/* Mobile site title */
.header-mobile-logo a:after {
    content: "ALEXANDRA CABRERO";
    display: block;
}

Worked perfectly!!!!! Thanks!!!!!

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

 

So I've used this code and managed to get my title next to my logo; but now I'm wondering if anyone can help me add a subtitle underneath this existing title?

On 10/8/2021 at 7:39 AM, emelliamia said:

 

So I've used this code and managed to get my title next to my logo; but now I'm wondering if anyone can help me add a subtitle underneath this existing title?

change display: inline-block;

to

display: block;

Following on from this question...

Does anyone know how I could have:

Title on left

Logo underneath title

Page headings still displaying horizontally from left to right (not in the centre)?

Thank you so much!

Also I don't know the first thing about coding; do you do the CSS code first or first upload the logo?

Thank you community!

On 2/18/2022 at 12:33 AM, OSMR said:

Following on from this question...

 

Does anyone know how I could have:

Title on left

Logo underneath title

Page headings still displaying horizontally from left to right (not in the centre)?

 

Thank you so much!

 

Also I don't know the first thing about coding; do you do the CSS code first or first upload the logo?

 

Thank you community!

What is your site url? We can give exact code

Hi, is it possible to make the header layout: left justified site title, center logo, right justified pages?

Thanks

On 4/26/2022 at 2:55 AM, StudioR said:

Hi, is it possible to make the header layout: left justified site title, center logo, right justified pages?

Thanks

This will require custom code. What is your site url? We can help easier

hello, i tried all of the code shared in this thread but the only thing i see is the logo and the site title is still not visible. any ideas? www.empathystories.org password: Tarameeting

11 hours ago, stories said:

hello, i tried all of the code shared in this thread but the only thing i see is the logo and the site title is still not visible. any ideas? www.empathystories.org password: Tarameeting

in addition, when i insert the logo it is larger than the hamburger menu in mobile view and makes the black band at the top much thicker. is it possible to reduce the logo size to the height of the hamburger menu so the black band at the top goes back to the default narrower height?

On 4/27/2022 at 3:38 AM, tuanphan said:

This will require custom code. What is your site url? We can help easier

Thank you. It is not live yet, but the url is https://khaki-watermelon-hrys.squarespace.com/

4 hours ago, StudioR said:

It is not live yet,

You site is private.

Please set up a site-wide password.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

hi @creedon

i shared the password in the original post: Tarameeting

thanks for taking a look!

oops! @creedon i see you were talking with someone else! do you or @tuanphan have any ideas regarding my questions? thank you!

@creedon Thank you so much for your help. The password is arvernebythesea

On 4/25/2022 at 12:55 PM, StudioR said:

is it possible to make the header layout: left justified site title, center logo, right justified pages?

Add the following to Design > Custom CSS.

.header-display-desktop,
.header-title-nav-wrapper {

  flex-direction : row-reverse;
  
  }

.header-actions--right {

  justify-content : flex-start;
  
  }

.header-nav-list {

  justify-content : right;
  width : 100%;
  
  }

This is for v7.1 and specific to the posters need.

Let us know how it goes.

@creedon that worked great. how can i replace the button (now left justified) with the site title?

On 5/3/2022 at 2:36 AM, StudioR said:

that worked great. how can i replace the button (now left justified) with the site title?

Do you still need help?

@tuanphan Yes, I do. Thank you. Currently the site header has the button (left justified), logo (center justified) and navigation tabs (right justified. I would like to replace the button with the site title and have the typeface for the site title match the rest of the site which I believe is Minerva. Thank you so much for your help with this. 

https://khaki-watermelon-hrys.squarespace.com/

pw: arvernebythesea

@creedon and @tuanphan i tried the codes shared in this thread but the only thing i see is the logo and the site title is still not visible. any ideas? in addition, when i insert the logo it is larger than the hamburger menu in mobile view and makes the black band at the top of the page much thicker. is it possible to reduce the logo size to the height of the hamburger menu so the black band at the top goes back to the default narrower height? www.empathystories.org password: Tarameeting

On 5/10/2022 at 5:56 AM, StudioR said:

@tuanphan Yes, I do. Thank you. Currently the site header has the button (left justified), logo (center justified) and navigation tabs (right justified. I would like to replace the button with the site title and have the typeface for the site title match the rest of the site which I believe is Minerva. Thank you so much for your help with this. 

 

https://khaki-watermelon-hrys.squarespace.com/

pw: arvernebythesea

 

 

It looks like you solved this by using a large image?

On 5/11/2022 at 9:57 AM, stories said:

@creedon and @tuanphan i tried the codes shared in this thread but the only thing i see is the logo and the site title is still not visible. any ideas? in addition, when i insert the logo it is larger than the hamburger menu in mobile view and makes the black band at the top of the page much thicker. is it possible to reduce the logo size to the height of the hamburger menu so the black band at the top goes back to the default narrower height? www.empathystories.org password: Tarameeting

Did you remove logo? I see site title text only

On 6/5/2021 at 4: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?

Hello!

I've used the above code and it's worked perfectly for my website.

It doesnt fit so well on mobile - I have found the below coding but this is for desktop only
How would I go about hiding this on mobile only?

.homepage a#site-title {
    visibility: hidden;
}

On 9/21/2022 at 5:58 PM, lh-cl-2021 said:

Hello!

I've used the above code and it's worked perfectly for my website.

It doesnt fit so well on mobile - I have found the below coding but this is for desktop only
How would I go about hiding this on mobile only?

.homepage a#site-title {
    visibility: hidden;
}

 

 

Wrap code by media query to make it run on mobile

@media screen and (max-width:767px) {
.homepage a#site-title {
    visibility: hidden;
}
}

Hi! Does anyone know how to do logo on the left, menu in the center, site title on the right? 

I was messing around with this but it's not working right

// header title
.header-title-logo a:after {
    content: "LUCAS GODLEWSKI";
    display: inline-block;
    font-size: 22px;
    font-family: Abel;
    color: black;
    text-align: center;
    vertical-align: center;
    font-weight:500;
    padding-left: 50px;
}
.header-title-logo img {
    vertical-align: right;
}