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

On 12/1/2022 at 6:11 AM, lilleyluna said:

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

Possible. If you share link to your site, we can give the code

Remember set layout to Left Logo - Middle or Right Nav first

Hi - I used one of these, not sure which one, and I was wondering if anyone knows how to change the title color when viewing certain pages? I want it to stay white most of the time, but then a few pages need a darker color. How would I go about this? Thank you!

Please post the URL for a pages on your site where you want dark titles and we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

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 site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

Used the code that is posted in this thread and it works - thanks! However, it looks terrible on mobile. How do I fix this?

On 1/25/2023 at 6:46 AM, ElliceF said:

Used the code that is posted in this thread and it works - thanks! However, it looks terrible on mobile. How do I fix this?

What is problem on mobile + What is your site url?

On 1/26/2023 at 11:19 PM, tuanphan said:

What is problem on mobile + What is your site url?

The logo looks very tiny on mobile and there is no way to resize. Website is https://www.ellicefordphotography.com/

On 1/31/2023 at 5:09 AM, ElliceF said:

The logo looks very tiny on mobile and there is no way to resize. Website is https://www.ellicefordphotography.com/

You mean this?

On 2/2/2023 at 9:25 AM, tuanphan said:

You mean this?

No. I removed the code and therefore my logo to just have text at the top, as I didn't like how it looked. Is there a way to make the logo bigger, while also keeping the text? Thanks!

On 2/4/2023 at 7:13 AM, ElliceF said:

No. I removed the code and therefore my logo to just have text at the top, as I didn't like how it looked. Is there a way to make the logo bigger, while also keeping the text? Thanks!

Hi,

Which logo & text? I see logo only

I'd like for my logo to appear on the left, title center, and pages/menu on the right. I've been playing around with the code but I'm stuck. Pls send help lol

On 2/28/2023 at 10:40 AM, grandnationxl said:

I'd like for my logo to appear on the left, title center, and pages/menu on the right. I've been playing around with the code but I'm stuck. Pls send help lol

What is your site url?

www.grandnationxl.com

On 3/7/2023 at 6:03 AM, grandnationxl said:

www.grandnationxl.com

You mean add title here?

Add to Design > Custom CSS

.header-display-desktop .header-title-nav-wrapper:before {
    content: "enter title";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
}

this does code does not work on mobile, is there a way to make it work?

On 4/10/2023 at 1:43 AM, ManuelMolina said:

this does code does not work on mobile, is there a way to make it work?

What is site url? We can check easier

1 minute ago, Dynasty said:

Hey, I used this code to get the logo and title next to each other.

.header-title-logo a:after {
    content: "Dynasty Accounting";
    display: inline-block;
    font-size: 32px;
    font-family: Poppins;
    color: white;
    text-align: center;
    vertical-align:middle;
    font-weight:450;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}

How can I apply this to only the desktop view and have just the logo, no title, on the mobile view? Can someone please help me with this issue?

Also, if there's a way to display 32px on the desktop view and just 20px on mobile view?

On 4/28/2023 at 6:06 AM, Dynasty said:

 

Change to this code

@media screen and (min-width:992px) {
.header-title-logo a:after {
    content: "Dynasty Accounting";
    display: inline-block;
    font-size: 32px;
    font-family: Poppins;
    color: white;
    text-align: center;
    vertical-align:middle;
    font-weight:450;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}
}

Hey thanks for this code! @tuanphan 

@media screen and (min-width:992px) {
.header-title-logo a:after {
    content: "Dynasty Accounting";
    display: inline-block;
    font-size: 32px;
    font-family: Poppins;
    color: white;
    text-align: center;
    vertical-align:middle;
    font-weight:450;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}
}

Is there a way to display just text, no logo, for the mobile view using the code above?

On 5/4/2023 at 2:45 AM, Dynasty said:

Hey thanks for this code! @tuanphan 

@media screen and (min-width:992px) {
.header-title-logo a:after {
    content: "Dynasty Accounting";
    display: inline-block;
    font-size: 32px;
    font-family: Poppins;
    color: white;
    text-align: center;
    vertical-align:middle;
    font-weight:450;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}
}

Is there a way to display just text, no logo, for the mobile view using the code above?

Add this code under. If it doesn't work, please share site url, we can help easier

@media screen and (max-width:991px) {
	header#header img {
		visibility: hidden;
}
}

Thank you so much for sharing some knowledge. @tuanphan

I tried using this:

// LOGO IMAGE AND TEXT //

.header-title-logo a {
  position: relative;
  display: inline-block;
}

.header-title-logo a::after {
  content: "Live Lite by Linda";
  font-size: 26px;
  font-family: "Poppins", sans-serif;
  color: inherit;
  text-align: center;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-weight: 500;
  margin-left: 15px;
}

.header-title-logo img {
  vertical-align: middle;
}

But I have two problems I'm hoping someone can help me figure out. 

1. The text used to change dynamically. Now it doesn't. Some of my pages have dark images in the top sections. Since my Nav is transparent, how can I get around this?
2. On my mobile version the text has disappeared, is there away to get it back and make it fit?
3. I do have both site-title, header-logo and mobile-logo plugged in the back.

Screenshots and link for reference below. Thank you in advance. 

https://livelitebylinda.squarespace.com/
PW: lite

On 5/6/2023 at 12:24 AM, tuanphan said:

Add this code under. If it doesn't work, please share site url, we can help easier

@media screen and (max-width:991px) {
	header#header img {
		visibility: hidden;
}
}

 

Would love your thoughts. 

On 5/19/2023 at 12:43 AM, cro0w said:

Would love your thoughts. 

#1. You can add this code to Page Header to change color of site title on one page

<style>
  .header-title-logo a::after {
  	color: white !important;
  }
</style>

#2. With mobile, use this

.header-mobile-logo a:after {
    content: "Live Lite by Linda";
    font-size: 26px;
    font-family: "Poppins", sans-serif;
    color: inherit;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    font-weight: 500;
}

on this topic, how do I put the site title NEXT TO the logo, to the right of it? I used the following code and the site title kept appearing above or below the logo.

.header-title-logo a:after {
    content: "LENS OF GRACE NUTRITION, LLC";
    display: inline-block;
    font-size: 24px;
    font-family: Poppins;
    color: #c6c0b6;
    text-align: center;
    vertical-align:middle;
    font-weight:900;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}

6 hours ago, melissaBOotfds said:

on this topic, how do I put the site title NEXT TO the logo, to the right of it? I used the following code and the site title kept appearing above or below the logo.

.header-title-logo a:after {
    content: "LENS OF GRACE NUTRITION, LLC";
    display: inline-block;
    font-size: 24px;
    font-family: Poppins;
    color: #c6c0b6;
    text-align: center;
    vertical-align:middle;
    font-weight:900;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}

Change it to this new code. If it doesn't work, please share link to your site, we can check easier

.header-title-logo a:after {
    content: "LENS OF GRACE NUTRITION, LLC";
    display: inline-block;
    font-size: 24px;
    font-family: Poppins;
    color: #c6c0b6;
    text-align: center;
    vertical-align:middle;
    font-weight:900;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}
.header-title-logo a {
	display: flex;
	align-items: center;
}

On 7/28/2023 at 8:07 PM, tuanphan said:

Change it to this new code. If it doesn't work, please share link to your site, we can check easier

.header-title-logo a:after {
    content: "LENS OF GRACE NUTRITION, LLC";
    display: inline-block;
    font-size: 24px;
    font-family: Poppins;
    color: #c6c0b6;
    text-align: center;
    vertical-align:middle;
    font-weight:900;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}
.header-title-logo a {
	display: flex;
	align-items: center;
}

 

that worked so beautifully thank you!