NODProducts Posted December 15, 2022 Share Posted December 15, 2022 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
tuanphan Posted December 17, 2022 Share Posted December 17, 2022 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
NODProducts Posted December 20, 2022 Author Share Posted December 20, 2022 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! Link to comment
NODProducts Posted December 21, 2022 Author Share Posted December 21, 2022 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! Link to comment
tuanphan Posted December 24, 2022 Share Posted December 24, 2022 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment