Jump to content

Adjust site title, logo and menu

Go to solution Solved by Ziggy,

Recommended Posts

Hi. I have looked across a few discussions on similar topics but am unable to successfully customise my site header.

Two issues:

1) Desktop: At the moment the site title is too low in the header section. I would like to align the elements in one line, with equal padding above and below. I would like them in this order: logo (far left), site title (mid-left), menu (mid-right) and language/social links (far right).

2) Mobile: I would like to 1) increase the size of the logo 2) reduce the size of the site title and 3) reduce the padding above the site title

Thanks very much for your help

Child of the Earth CIC

Link to comment
  • Solution

A few things to start with making these changes.

Change the addition of the site title to this in Custom CSS:

.header-title-logo:after {
    content: "Child of the Earth CIC";
    display: inline-block;
    font-size: 50px;
    font-family: Cormorant Infant;
    color: #006400;
    text-align: center;
    vertical-align: middle;
    font-weight: 800;
    padding-left: 3vw;
}

Then add this:

.header-title-logo {
    display: inline-flex;
    justify-content: flex-start;
    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
14 minutes ago, COTE2023 said:

thank you for your qick and super helpful response 🙂

No problem! Can you mark my answer as the solution to your post?

For the mobile view try this:

@media only screen and (max-width:767px) {
  .header-title-logo:after {
    font-size: 6vw !important;
  }
}

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-title-nav-wrapper {
    flex-wrap: wrap;
}
.header-layout-nav-right .header-nav {
    text-align: left;
    padding-left: 0vw;
    margin-top:8px;
}

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

thanks.

I've added that in and changed the padding to 10vw so the menu items are aligned with the site title.

I would now like to reduce the space between the menu items and the site title slightly and increase the logo size so it is aligned with the top of the site title and the bottom of the menu items. I hope that makes sense?

I bought you a coffee 😀

Link to comment

I've adjusted the code here:

.header-title-nav-wrapper {
    flex-wrap: wrap;
}
.header-title-logo {
    align-items: flex-start;
}
.header-layout-nav-right .header-nav {
    text-align: left;
    padding-left: 140px;
    margin-top:-30px;
    width: 60%;
}

If you want the logo larger you can do that in the Header Settings, but you'll need to adjust the margin-top property and the padding-left.

...and thanks for the coffee!

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.