Jump to content

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

Recommended Posts

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

 

hi! Somehow this code got deleted. So when I went to copy and paste it back from this forum, now the header is up much higher and no longer in center alignment with the logo on the left... I'm not sure what to do 😞 pictured below

Screenshot (54).png

Link to comment
  • 3 weeks later...

I wanted to make my header (Yuan Qi) display in one line, like this:

[img] [Yuan Qi] 

Here's the code that I used, which I pulled from further up in the thread.

.header-title-logo a:after {
    content: "Yuan Qi";
    display: inline-block;
    font-size: 16px;
    font-family: heading 1;
    color: white;
    text-align: middle;
      vertical-align: middle;
      padding-left: 1px;
    padding-top: 5px;
}
.header-title-logo img {
    vertical-align: middle;
}

This code used to work, but at some point this year, it began displaying in two lines instead, like this:

image.png.73f3c7df673ca320325521a3b05935b1.png

Any ideas what could be wrong? Is the "inline-block" value no longer supported?

Thank you. My website is chrisni.com

Link to comment
On 9/12/2023 at 9:37 PM, Chris-Ni said:

I wanted to make my header (Yuan Qi) display in one line, like this:

[img] [Yuan Qi] 

Here's the code that I used, which I pulled from further up in the thread.

.header-title-logo a:after {
    content: "Yuan Qi";
    display: inline-block;
    font-size: 16px;
    font-family: heading 1;
    color: white;
    text-align: middle;
      vertical-align: middle;
      padding-left: 1px;
    padding-top: 5px;
}
.header-title-logo img {
    vertical-align: middle;
}

This code used to work, but at some point this year, it began displaying in two lines instead, like this:

image.png.73f3c7df673ca320325521a3b05935b1.png

Any ideas what could be wrong? Is the "inline-block" value no longer supported?

Thank you. My website is chrisni.com

Add this CSS under

.header-title-logo a {
	display: flex; !important;
	align-items: center;
}

If it doesn't work, please share site url, we can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/14/2023 at 5:00 AM, tuanphan said:

Add this CSS under

.header-title-logo a {
	display: flex; !important;
	align-items: center;
}

If it doesn't work, please share site url, we can check easier

It didn't solve the problem, though admittedly I feel like I may be misinterpreting.

My site url is https://ellipse-papaya-hape.squarespace.com

Here is how I tried adding your code under:

.header-title-logo a:after {
    content: "Yuan Qi";
    display: inline-block;
    font-size: 16px;
    font-family: heading 1;
    color: white;
    text-align: middle;
      vertical-align: middle;
      padding-left: 1px;
    padding-top: 5px;
}
.header-title-logo img {
    vertical-align: middle;
}
.header-title-logo a {
    display: flex; !important;
    align-items: center;
}

 

Link to comment
On 9/19/2023 at 1:33 AM, Chris-Ni said:

It didn't solve the problem, though admittedly I feel like I may be misinterpreting.

My site url is https://ellipse-papaya-hape.squarespace.com

Here is how I tried adding your code under:

.header-title-logo a:after {
    content: "Yuan Qi";
    display: inline-block;
    font-size: 16px;
    font-family: heading 1;
    color: white;
    text-align: middle;
      vertical-align: middle;
      padding-left: 1px;
    padding-top: 5px;
}
.header-title-logo img {
    vertical-align: middle;
}
.header-title-logo a {
    display: flex; !important;
    align-items: center;
}

 

Can you send all current code after you added my code? I just tested the code on my browser & It should work

image.thumb.png.1f5af53bb314eb3283361c8f4615ec98.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
8 hours ago, tuanphan said:

Can you send all current code after you added my code? I just tested the code on my browser & It should work

image.thumb.png.1f5af53bb314eb3283361c8f4615ec98.png

Of course, here is all the code that I have in the Custom CSS box:

Most importantly, the Squarespace custom CSS box says there's a syntax error on line 45,

which is where I have "display: flex; !important;"

#wm-loading-animation img{
  height:250px;
  width:auto;
}
#wm-loading-animation{
  height:100vh;
  width:100vw;
  background:#342e3d;
  position:fixed;
  z-index: 99999;

  display:flex;
  align-items:center;
  justify-content:center;
}

.wm-slider-container .dots-container{
  left: unset !important;
  transform: unset !important;
  right: 3vw
}

#wm-loading-animation.hide-animation{
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s,
    opacity 1s linear; /*Hide this element after load*/
}

.header-title-logo a:after {
    content: "Yuan Qi";
    display: inline-block;
    font-size: 16px;
    font-family: heading 1;
    color: white;
    text-align: middle;
      vertical-align: middle;
      padding-left: 1px;
    padding-top: 5px;
}
.header-title-logo img {
    vertical-align: middle;
}
.header-title-logo a{
  	display: flex; !important;
  	align-items: center;
}
/* Vertical Line */
.vertical-line {
  height: 450px; /* line height */
  width: 2px; /* line width */
  background: #a8a6a1; /*line colour*/
  margin-right: auto;
  margin-left: auto;
}

/* Vertical Line */
.half-vertical-line {
  height: 200px; /* line height */
  width: 2px; /* line width */
  background: #a8a6a1; /*line colour*/
  margin-right: auto;
  margin-left: auto;
}

html {
scroll-behavior: smooth;
}
a {
text-decoration: none !important;
}

 .arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 3px solid #a8a6a1;
    border-right: 3px solid #a8a6a1;
    transform: rotate(45deg) translate(20px,20px);
    margin: -10px;
  	opacity: 0;
    animation: animate 1.8s ease;
  	animation-iteration-count: 4;
}
@keyframes animate {
 	0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

In case it is relevant, I also have this piece of header code injection

<div id="wm-loading-animation">
  <div class="loading-graphic">
    <img src="https://i.gifer.com/73c9.gif">
  </div>
</div>
<script>
 function hideAnimation(){
   document.querySelector("#wm-loading-animation").classList.add("hide-animation");
 }
 setTimeout(function(){
   setTimeout(function(){
     hideAnimation()
   }, 500);
   let checkLoad = setInterval(function(){
     if (document.readyState === "complete"){
       hideAnimation();
       clearInterval(checkLoad)
     }
   }, 100);
 }, 1500);
</script>

 

Link to comment
2 hours ago, Chris-Ni said:

the Squarespace custom CSS box says there's a syntax error on line 45,

which is where I have "display: flex; !important;"

There shouldn't be a semi-colon (;) before the exclamation (!).

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 3 weeks later...
On 10/18/2023 at 8:20 AM, CWSTVancouver said:

I'm struggling to get my site title to sit on the same line as suggested above. The site title seems to default to the second line below. I've adjusted the padding to sit in the right spot but would like it on the same line to the right of my logo. 

The code I used is as follows:

Thanks for any help. 

Screen Shot 2023-10-17 at 1.35.32 PM.png

Screen Shot 2023-10-17 at 6.18.57 PM.png

What is your site url? We can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/25/2023 at 12:59 AM, CWSTVancouver said:

Hi there, we have yet to publish it yet, but here is the current domain.

https://dragonfly-ruby-k4l4.squarespace.com/

The site is private. You can follow this guide to share url

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 11/8/2023 at 7:34 PM, Ibs said:

Hello all,

I've used the code here and have both but the text and image are not aligned for some reason. Any clue why?

Any help would be appreciated!

https://www.artiocarbon.com/

PW: ARTIO1023

Regards,

Ibs

 

image.thumb.png.dee9652f6973df5c134a6be31d5998fe.png

Use this code

.header-title-logo a:after {
    content: "Yuan Qi";
    display: inline-block;
    font-size: 16px;
    font-family: heading 1;
    color: white;
    text-align: middle;
      vertical-align: middle;
      padding-left: 1px;
    padding-top: 5px;
}

image.png.33387b566c65dabdf907cb739d01fa53.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

is this too hacky or does it seem okay @tuanphan

https://www.transanta.com/

.header-title-logo img {
	border: 1px solid #999;
    border-radius: 200px;
}
.header-title-logo a:after {
    content: "Transanta";
    display: inline-block;
    font-size: 24px;
    text-align: center;
    vertical-align:middle;
    font-weight:600;
    padding-left: 90px;
    margin-top: -70px;
}
.header-title-logo img {
    vertical-align: middle;
}

 

Link to comment
On 11/16/2023 at 10:28 PM, dnmddy said:

is this too hacky or does it seem okay @tuanphan

https://www.transanta.com/

.header-title-logo img {
	border: 1px solid #999;
    border-radius: 200px;
}
.header-title-logo a:after {
    content: "Transanta";
    display: inline-block;
    font-size: 24px;
    text-align: center;
    vertical-align:middle;
    font-weight:600;
    padding-left: 90px;
    margin-top: -70px;
}
.header-title-logo img {
    vertical-align: middle;
}

 

You can also use this code

.header-title-logo img {
    border: 1px solid #999;
    border-radius: 200px
}
.header-title-logo a {
    display: flex;
    align-items: center;
}
.header-title-logo a:after {
    content: "Transanta";
    display: inline-block;
    font-size: 24px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    padding-left: 20px;
}

here I used display flex to align center text

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 12/26/2023 at 6:44 AM, lookkook said:

Hi! Is there a way to have the logo on the left and the site title in the center of the page?
I have tried moving it around, but nothing seems to be working.

https://coyote-crocodile-xabb.squarespace.com/

pw: backandforth

 

Thank you!

Add this to Custom CSS

.header-title-logo a:after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

image.thumb.png.b947a99f003568173a245273384dbd00.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi, I am trying to get the site name next to the logo in mobile as well. Can you help me out with this? Here is the css I am using for that section.

 

.header-mobile-logo a:after {
  content: "GameNite";
  display: flex !important; 
  font-family: 'Blackentina';
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  padding-left: 18px;
}

 

but it appears under the logo instead. I have tried to use

 

...
display: inline-block;
...

 

as well.

 

Our site is https://playgamenite.io/

 

Edit: For now I am going to remove that css portion so the site is still presentable in mobile.

Edited by safwaan
Link to comment
On 1/5/2024 at 5:23 AM, safwaan said:

Hi, I am trying to get the site name next to the logo in mobile as well. Can you help me out with this? Here is the css I am using for that section.

 

.header-mobile-logo a:after {
  content: "GameNite";
  display: flex !important; 
  font-family: 'Blackentina';
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  padding-left: 18px;
}

 

but it appears under the logo instead. I have tried to use

 

...
display: inline-block;
...

 

as well.

 

Our site is https://playgamenite.io/

 

Edit: For now I am going to remove that css portion so the site is still presentable in mobile.

Use this code

.header-mobile-logo a:after {
  content: "GameNite";
  font-family: 'Blackentina';
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  padding-left: 18px;
}
.header-mobile-logo a {
    display: flex !important;
    align-items: center !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (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.