Text aligning not working on new ccs adjusted navigation bar

Hello,

I have a website on squarespace 7.0 but am now rebuilding one on 7.1 (as I can't transfer it). Trying to get it have the same look, which is turning out to be difficult. I've already applied quite a bit of css, but struggling to get the navigation bar in the right place.

I can't the text aligned left + aligned with the title (stay fixed in it's position - it's now going all places when you adjust site width). As change hover behavior to click. So dropdown menu will appear when clicking on dropdown title (folder title), not hover.

This is what it does now: on hover it appears and goes over the title below. I want it to click and drop down and stay open.

Like this example: where it expands down:

Can you help?

Website:

icosahedron-moose-2a8n.squarespace.com
password: rkpreview1

I'm not sure this is going to be possible, the desktop navigation isn't built to be expandable like that. 

What made you want to upgrade to 7.1 if you want it to look the same?

Hi Ziggy,

Thanks for your reply.

Why isn't it? As I can have it on my 7.0 website? When I click on the navigation it drops down to multiple pages within that main one.

I want to upgrade as the 7.1 allows much more custom design possibilities, especially also for mobile versions + much better for shopping/interactions with people visiting the website?

I don't have a good answer as to why. When they upgraded to 7.1 there were plenty of new features and customization options, but others got dropped. 7.0 had many templates with varying functionality, but lots of templates were missing basic functions despite having nice little features, some of those fringe nice feature were dropped. Squarespace generally wants to make designing a good website easy, and sometimes that means not having every possible option as too many choices make it harder to use. 

Hm, yes, I understand.

So is it impossible to left align the text in the navigation?

It feels like it should be possible, having already changed the navigation from the top right horizontally to the left side vertically.

Thank you so much for your help,

Renee

This CSS will align the navigation items to the left:

.header-layout-nav-right .header-nav-list {
    justify-content: flex-start;
}

Then this will remove the left padding on each item:

.header-layout-nav-right .header-nav-item:not(:first-child):not(.header-actions-action--cart) {
    margin-left: 0vw;
}

And you'll probably want to adjust the "left:170px;" attribute on .header-nav-list

That works perfectly, thanks Ziggy.

The only thing left is now the "leftL170px;" indeeed - how do I get this to be exactly the width of the site title? I'm adjusting the number, but every time I adjust my screen width, the navigation "let's go" of the title and moves before/after it compared to the width of the site, if that makes sense.

Thanks so much,

Renee

I would try to match it to the padding on the site header, in this case 4vw.

So change the padding and change the left, like this:

.header-nav-list {
    padding: 40px 40px 40px 0px;
    left: 4vw;
}

Give me a thumbs up if that worked, thanks!

I've added it, but it doesn't seem to be right.

Either because I have other code in there that messes it up (I tried to remove and add and see differences, but no luck) or maybe my site header isn't in the right place / width?

Amazing, that seems to solve it! 

It still moves / isn't 100% aligned with title, but this feels very good already. Thanks so much Ziggy.

Do you mind if I ask you a few more questions in relation to other css things / in a new thread or here?

Thanks so much

1 hour ago, reneekemps said:

Do you mind if I ask you a few more questions in relation to other css things / in a new thread or here?

You're always more than welcome to ask! That's what the forum is for! I would recommend that you mark my post as the solution to this thread and start a new one, you can always tag me.