Center Navigation Items Without Stacking

Site URL: https://tambourine-oarfish-c28h.squarespace.com/

Looking to center the navigation links between the logo and Add to Cart button without the links stacking or the logo shrinking. Currently using the code below to achieve something close to the desired look, but I'm having issues with the nav staying centered on all screen sizes and the logo not shrinking down to nothing on smaller screens.

.header-title-nav-wrapper {
    flex: 1 0 82%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 0 1 auto;
}
.header-layout-nav-center .header-nav-list {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

Desired effect attached. Thank you!

https://tambourine-oarfish-c28h.squarespace.com/

password: Bestcannoli2021!

Hi. You mean

Left Menu - Middle Logo - Right Menu/Car icon?

Hi @tuanphan, I'm looking for:

Left logo — Middle Navigation — Right Cart Icon

19 hours ago, dunnard said:

Hi @tuanphan, I'm looking for:

Left logo — Middle Navigation — Right Cart Icon

Hi. It looks like you solved this?

@tuanphan At larger screen sizes it looks great! But as the screen gets smaller, the navigation starts aligning to the left and the logo scales down to nothing before it hits the mobile breakpoint (with hamburger nav). Here's what I'm seeing at 1080px:

Hoping to keep the nav centered all the way to the mobile breakpoint, and prevent the header/logo from shrinking so much until that point as well. Something closer to this:

Hi. Do you still need help?

Also, want to fix these?

Site URL – https://tambourine-oarfish-c28h.squarespace.com/?password=Bestcannoli2021!

1. (Desktop – Special occasions) Reduce space?

https://tambourine-oarfish-c28h.squarespace.com/special-occasions/?password=Bestcannoli2021!

2. (Mobile/Tablet – Cannoli) Reduce space?

https://tambourine-oarfish-c28h.squarespace.com/cannoli/?password=Bestcannoli2021!

3. (Mobile – Delivery) Make 2 icons/rows?

https://tambourine-oarfish-c28h.squarespace.com/delivery/?password=Bestcannoli2021!

4. (Tablet – Footer) Text break.

https://tambourine-oarfish-c28h.squarespace.com/?password=Bestcannoli2021!

5. (Tablet – Homepage) Increase text width?

https://tambourine-oarfish-c28h.squarespace.com/?password=Bestcannoli2021!

6. (Tablet – Weddings) Increase text width?

https://tambourine-oarfish-c28h.squarespace.com/weddings/?password=Bestcannoli2021!

Yes! @tuanphan would still love help fixing the issues I'm having with the header, and help with any of the additional items you pointed out in your post. But definitely the header: looking to keep the nav centered all the way to the mobile breakpoint, and prevent the header/logo from shrinking so much.

18 hours ago, dunnard said:

Yes! @tuanphan would still love help fixing the issues I'm having with the header, and help with any of the additional items you pointed out in your post. But definitely the header: looking to keep the nav centered all the way to the mobile breakpoint, and prevent the header/logo from shrinking so much.

Q5 + 6. Add to Design > Custom CSS

/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* weddings text width */
div#page-section-60da31455d5a6c33996b3e67 .span-5 {
    width: 50%;
}
div#page-section-60da31455d5a6c33996b3e67 .span-2 {
    display: none;
}
/* homepage 3 icons text width */
[data-section-id="60e62bc3b5287639a2220d4c"] .content {
    width: 95% !important;
}
}

Q4. How about removing footer logo on tablet only?

9 hours ago, tuanphan said:

Q5 + 6. Add to Design > Custom CSS

/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* weddings text width */
div#page-section-60da31455d5a6c33996b3e67 .span-5 {
    width: 50%;
}
div#page-section-60da31455d5a6c33996b3e67 .span-2 {
    display: none;
}
/* homepage 3 icons text width */
[data-section-id="60e62bc3b5287639a2220d4c"] .content {
    width: 95% !important;
}
}

Q4. How about removing footer logo on tablet only?

Sure! But really the most pressing update I'm hoping to make is to the header

On 8/23/2021 at 12:19 AM, dunnard said:

 

Sure! But really the most pressing update I'm hoping to make is to the header

Add to Design > Custom CSS

/* Tablet footer */
@media screen and (max-width:900px) and (min-width:641px) {
div#page-section-60d0cb13dd814843916dd163>.row>.span-3 {
    display: none;
}
div#page-section-60d0cb13dd814843916dd163 .span-8 {
    width: 100%;
}
}

On 7/19/2021 at 9:24 AM, dunnard said:

Site URL: https://tambourine-oarfish-c28h.squarespace.com/

Looking to center the navigation links between the logo and Add to Cart button without the links stacking or the logo shrinking. Currently using the code below to achieve something close to the desired look, but I'm having issues with the nav staying centered on all screen sizes and the logo not shrinking down to nothing on smaller screens.

.header-title-nav-wrapper {
    flex: 1 0 82%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 0 1 auto;
}
.header-layout-nav-center .header-nav-list {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

Desired effect attached. Thank you!

 

https://tambourine-oarfish-c28h.squarespace.com/

password: Bestcannoli2021!

Wondering if anyone has a solve for this original issue? Greatly appreciated!