EDIT HEADER LAYOUT

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

What's your website URL?

5 minutes ago, Ziggy said:

What's your website URL?

https://www.manistudiomiami.com/

Password?

ciao

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

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 ?

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

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?

38 minutes ago, Puttinoo said:

design -> custom css

Yes. 

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

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

thank you 

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

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

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

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.

wooow thank you very much.

Can I do something for you, thank you?

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

OK thanks anyway.
Thank you for your time and have a nice day. 
See you soon