Jump to content

How do I show logo and site title in the header?

Go to solution Solved by Ziggy,

Recommended Posts

Hello, 
I am looking for help with the design of my header. In the picture you can see my current header (the top) and then how I would like my header to look like (the bottom). So I am looking for a way to show the Logo and Site title, so that when you click on any of them you get redirected to the home page. I would also like the language flag from Weglot to be above the log in and basket. Is there any way to do this? Either with a custom css code or another work around. At the moment I have just uploaded the logo and my business name as one picture.
Any help is greatly appreciated.  

Kind Regards 
Kate

Skrmbillede2024-03-12111110.thumb.png.1cb2dccc8cf475ceda3f64d400587e07.png

Link to comment

Can you share your website URL?

Upload the logo (without the name), then set the header style to have the navigation in the center and the logo on the left. Then we can add the company name above the navigation with a little code. 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Okay, here we go! Add this to Custom CSS:

// adjusting header navigation width
.header-title-nav-wrapper {
  flex: 1 0 80%;
}
.header-layout-nav-center .header-title {
  width: 20%;
  flex: 1 1 20%;
}
.header-layout-nav-center .header-nav {
  width: 60%;
  flex: 1 1 60%;
}

// addition of company name above navigation
.header-nav::before {
  content: "Kate's Design Cottage";
  display: block;
  text-transform: uppercase;
  font-size: 2rem;
  color: --solidHeaderNavigationColor;
  font-weight: 600;
  margin-bottom: 12px;
}

All in one, let me know how it goes!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Yes, that looks great! 

Could you mark my post as the solution and give it a like? Thanks!

You can try this, but it stacks the 3 items on the right.

.header-actions {
    display: inline-flex;
    align-items: flex-end;
}
.header-actions--right .customerAccountLoginDesktop {
    order: 2;
}
.header-actions .language-picker-desktop {
    order: 1;
}
.header-actions-action .header-actions-action--cart {
    order: 3;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I was missing a line, try this:

.header-actions {
  display: inline-flex;
  align-items: flex-end;
  flex-direction: column;
}
.header-actions--right .customerAccountLoginDesktop {
  order: 2;
}
.header-actions .language-picker-desktop {
  order: 0;
}
.header-actions-action .header-actions-action--cart {
  order: 3;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Try this:

.header-actions {
  display: inline-flex;
  align-items: flex-end;
  flex-direction: column;
}
.header-actions--right .customerAccountLoginDesktop {
  order: 0;
}
.header-actions .language-picker-desktop {
  order: -2;
}
.header-actions-action .header-actions-action--cart {
  order: 3;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
5 minutes ago, KatesDesignCottage said:

It works! Thank you so much for your help 😄 

Happy to help!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 months later...
Posted (edited)

@Ziggy I've been trying to replicate your above code, combined with one I found online, and I can't quite get it right - I'm hoping you won't mind helping me out?

Website is: https://clementine-leopard-se77.squarespace.com/

I want the words "Pride Hamilton" and the PH logo (at the top left of the page) to be on the same line - if that makes sense.  Right now, "Pride Hamilton" is below the logo, and I want them side-by-side on the same line, but no matter what I do, I can't get it to work.

This is the code I used:
// header title
.header-title-logo a:after {
    content: "Pride Hamilton";
    font-size: 44px;
    font-family: Anton;
    color: #E8E1FD;
    text-transform: uppercase;
    vertical-align: middle;
    font-weight: 400;
    padding-left: 110px;
}
.header-title-logo img {
    vertical-align: middle;
}

Edited by BearChrisK
Include additional context
Link to comment
13 hours ago, BearChrisK said:

@Ziggy I've been trying to replicate your above code, combined with one I found online, and I can't quite get it right - I'm hoping you won't mind helping me out?

Use this CSS instead:

.header-title-logo:after {
    content: "Pride Hamilton";
    font-size: 44px;
    font-family: Anton;
    color: #e8e1fd;
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    padding-left: 20px;
}
.header-title-logo {
    display: flex;
    align-items: center;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy you are AMAZING!  Oh my gosh, thank you SO much - that worked!  Comparing your code side-by-side to what I previously had, I can see what the changes were and they make sense to me now - - thanks for helping me out, I really appreciate it!

Link to comment
33 minutes ago, BearChrisK said:

thanks for helping me out, I really appreciate it!

Happy to help! Thanks for the like!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.