Jump to content

EDIT HEADER LAYOUT

Go to solution Solved by Ziggy,

Recommended Posts

Hello, I open this debate because I am having a problem in the construction of the site for my client.

In a nutshell, my client would like a header like that of vanity project (see photo attached) where we have a logo on the left, the menu in the center and the buttons on the right.
Vanity project managed to have the menu in one line and also have 2 buttons on the right.

This is not made possible, in fact if I put 4 or 5 pages in the menu, this is seen in 2 lines (see second photo attached) and not in one, that is, it goes back as if it had no more space.
Moreover I have the possibility to insert only a button on the right while vanity project has 2.

How can I do header like in vanity project?

I thank you in advance and wish you a good day

Puttinoo

Immagine 2023-03-14 151149.png

Immagine 2023-03-14 151313.png

Edited by Puttinoo
Link to comment

What's your website URL?

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

Password?

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

The website you shared is very different from the screenshot. The main reason that your website is different from "vanity projects" website is the size of everything, they are using a small logo, small navigation links, a small button. They may well have adjusted the widths of the elements to help everything fit on one line, but with the size you have all of your header elements there isn't space.

This is one way to add an extra button:

https://www.ghostplugins.com/free-plugins/2-navigation-buttons

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

The screenshot is different because I was trying to see if I could do it with other themes.
I tried it all, even putting the tiny characters to fit them in a row. The problem is that the font is really too small, so not very visible and not good.

I also contacted square’s support and they were telling me that they probably acted manually by entering codes into the site. That’s why I started this discussion, I was hoping to get a code to give more space to the menu.

Forgive me if I wasn’t clear from the start, I misexpressed myself.

Thank you for the second button. but where do I put that code? :
Settings, advanced, injection code?
or 
one page settings, advanced ?

Link to comment
8 minutes ago, Puttinoo said:

Thank you for the second button. but where do I put that code? :
Settings, advanced, injection code?
or 
one page settings, advanced ?

The instructions state Custom CSS, so put it in Design -> Custom CSS.

----

For the navigation, you can try this Custom CSS, but you'll need to make the logo and button smaller to have a chance of this working:

.header-layout-nav-center .header-title {
    width: 15%;
    flex: 1 1 15%;
}
.header-title-nav-wrapper {
    flex: 1 0 80%;
}
.header-layout-nav-center .header-actions {
    width: 15%;
}

 

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
17 hours ago, Ziggy said:

For the navigation, you can try this Custom CSS, but you'll need to make the logo and button smaller to have a chance of this working:

.header-layout-nav-center .header-title {
    width: 15%;
    flex: 1 1 15%;
}
.header-title-nav-wrapper {
    flex: 1 0 80%;
}
.header-layout-nav-center .header-actions {
    width: 15%;
}

 

forgives ignorance but also this must be put in design -> custom css?

Link to comment
38 minutes ago, Puttinoo said:

design -> custom css

Yes. 

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
1 minute ago, Puttinoo said:

then in case there is the possibility to remove the code in a simple way?
Or does it become complex?

You can remove it as easily as you can add it.

1 minute ago, Puttinoo said:

Changing the theme, does the code always remain or should it be injected again?

Theme changing doesn't impact the code injection or Custom CSS, but theme changing isn't a thing with 7.1

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

Okay, thank you so much for your time.

I just tried to put in the codes and in both cases there is a problem.

In the case of the menu in a row, the code makes me the menu in a single line but this is not centered, it remains more on the right than on the center.

As for the buttons instead I leave you an image attached

Immagine 2023-03-15 150629.png

Link to comment

Also, in Vanity Project, the title on the left is not attached to the left edge.
As well as the buttons on the right are not attached to the right edge but a little more detached.

I have both the name and the buttons attached to the edge, I would like them a little more centered

Immagine 2023-03-15 152451.png

Link to comment
6 minutes ago, Puttinoo said:

Also, in Vanity Project, the title on the left is not attached to the left edge.

You need to adjust your spacing under Site Styles, I'm guessing it's set to zero.

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

good morning Ziggy, I can not add the second button on the right of the header.
When I insert the CSS creates 2 buttons on existing pages (FAQ e Policy), I would like to create only one more button than there is already (book now, by default from square space). Just like in vanity project.
I’ll leave you pictures attached of how it is. and how it should be

Immagine 2023-03-16 102155.png

Immagine2023-03-14151313.png.ea5e82aadf30748847ce8d802a307a3f.png

Link to comment
  • Solution

Yes, it seems that plugin turns two navigation links into buttons rather than adding a second navigation button, I don't know off-hand how how Vanity Projects have done this.

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.