Prevent Nav Links Stacking! Would like Navigation Links to Scale Down so they fit any Browser Window Size before Mobile Breakpoint | Squarespace 7.1

Hello,

I'm hoping a Circle Member can help us with some custom code to prevent our navigation links from stacking when a browser window displaying our website is being scaled down prior to the mobile breakpoint. Our site is running on Squarespace 7.1

Ideally we would like the navigation links (left oriented) to stay on a single line and have the nav link folder titles scale down in size when browser window is being adjusted rather than stacking.

Our website is: nodproducts.com

Please let me know if any other information is needed to help troubleshoot this problem.

Thanks!

Hi,

Add this to Design > Custom CSS

nav.header-nav-list {
    flex-wrap: nowrap !important;
}

or you can consider changing to burger menu when problem appears

Tuanphan,

Thanks for your help–this bit of code now keeps my navigation from stacking, however, the links now begin to get cutoff when window size gets smaller.

Do you have any suggestions to make the links "auto-resize" to fit inside the navigation wrapper at all times? I've attached images for your reference.

Thank you!

On 12/16/2022 at 8:15 PM, tuanphan said:

Hi,

Add this to Design > Custom CSS

nav.header-nav-list {
    flex-wrap: nowrap !important;
}

or you can consider changing to burger menu when problem appears

@tuanphan Please see my post above–any further help would be appreciated!

On 12/22/2022 at 12:07 AM, NODProducts said:

@tuanphan Please see my post above–any further help would be appreciated!

You can consider some other options

• Above code + reduce nav size on specific screen sizes
• Force burger menu appears on specific screen sizes

What do you think?