HELP - Header on desktop and mobile and aspect ratio

hello,

I am launching my website ASAP but there are just 2 problems I am facing I can't solve.

1. header navigation is not on one line, it keeps going into 2 lines. I tried a code that fixed this but removed it because it then made the mobile header not centered. If you can help please help me! 🙂
2. I created the website on my huge display screen and it looks good. However, when I open it on my smaller screen (standard laptop) the aspect ratio looks too 'zoomed' in. For example, when the page is on 100% zoom it looks bad but when it is 90% zoom it is perfect - please help!!!!! 🙂

Thanks,

Kate

website is https://katesheridanstyle.squarespace.com/config/ please reach out for password if you can fix

Could you share the password?

I'm sure the header navigation is adjustable, but not sure how without looking at it.

Not sure what you want on the laptop screen but with some specifics I can probably help.

hello @Ziggythanks a lot! I just messaged you the password privately

I want it to look like the right proportions on any desktop/ipad/iphone but I think I figured it out yesterday with a bit of change. let me know if you do have any advice though!

@Ziggy oh and I also don't like the footer on mobile display, do you have any tips on how to make it look better instead of all the page links going on to 2 rows? thank you sooo much! 🙂

Okay, let's start by adding this Custom CSS to change the proportions of the header elements:

// Header element proportions
.header-layout-branding-center-nav-center .header-actions--left {
    flex: 0 1 15%;
    max-width: 15%;
}
.header-layout-branding-center-nav-center .header-actions--right {
    flex: 0 1 15%;
    max-width: 15%;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    flex: 0 0 70%;
}

hi @Ziggy Thanks, I added it! But it doesn't seem to have worked unfortunately 

It appears to be working great when I look at your website, even when I emulate a very small desktop screen:

@Ziggy ohh I just had a look and it is working, thank you so much! 🙂 The mobile header seems off-centre now, do you know how I can correct that? thank you!

You may want to reassess the footer layout since the newsletter block on tablet is causing an overflow, it needs more columns:

@Ziggy thank you soo much! 🙂 I will have a look at that!

@Ziggy please can you check if the change I made work? thank you!!!

6 minutes ago, kate_sheridan said:

please can you check if the change I made work? thank you!!!

That works much better, nice one!

Thanks for marking my post as the solution and giving it a like! Much appreciated!