Jump to content

Text aligning not working on new ccs adjusted navigation bar

Go to solution Solved by Ziggy,

Recommended Posts

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.

image.thumb.png.aee75be98d2568a90f8c5d4b5a10ff41.png

Like this example: where it expands down:

image.png.0c514dcb61e58e3ff50bd3083c91dcb1.png

 

Can you help?

Website:

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

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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?

 

Link to comment

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. 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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

Link to comment

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!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • Solution

I would change the width back to width back to a value above 0px.

There seems to be a space put in before each nav item, which is adding 14px of left padding, this should remove that:

.header-nav-item a::before, .header-menu-nav-item a::before {
    content: '';
    height: 0px;
    width: 0px;
    margin-right: 0px;
}

 

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
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.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
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.