Jump to content

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

Recommended Posts

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!

Link to comment
  • Replies 4
  • Views 602
  • Created
  • Last Reply

Top Posters In This Topic

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!

Screenshot 2022-12-20 at 10.12.50 AM.png

Screenshot 2022-12-20 at 10.12.35 AM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.