jmhalpin Posted June 30, 2021 Share Posted June 30, 2021 Site URL: https://www.mymichiganbeach.com Hi, I am looking for some custom CSS for to create columns in my navigation drop down. I gave a list of locations that is too long, and I would like it to appear in columns when it drops down. My website is: www.mymichganbeach.com. The nav item is "locations." Thank you in advance for your help, Jill Halpin Link to comment
Solution creedon Posted June 30, 2021 Solution Share Posted June 30, 2021 Add the following to Design > Custom CSS. .Header-inner--top .Header-nav-folder { column-gap : 1rem; display : grid; grid-template-columns : 1fr 1fr; } This is for v7.0 using the Brine template family. Let us know how it goes. tuanphan and jmhalpin 2 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
MistyPhotos Posted September 22, 2022 Share Posted September 22, 2022 Is there any way to keep the two columns to only one folder? I need the others to stay in one column. Thanks! Misty Link to comment
tuanphan Posted September 24, 2022 Share Posted September 24, 2022 On 9/22/2022 at 8:04 PM, MistyPhotos said: Is there any way to keep the two columns to only one folder? I need the others to stay in one column. Thanks! Misty What is your site url? We can take a look 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
MistyPhotos Posted September 26, 2022 Share Posted September 26, 2022 On 9/24/2022 at 4:05 AM, tuanphan said: What is your site url? We can take a look It is still in progress. Not live yet. Link to comment
creedon Posted September 26, 2022 Share Posted September 26, 2022 7 hours ago, MistyPhotos said: It is still in progress. Not live yet. Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
MistyPhotos Posted November 1, 2022 Share Posted November 1, 2022 falcon-khaki-f3fl.squarespace.com password: Siskinhospital2022 Thanks! Link to comment
creedon Posted November 1, 2022 Share Posted November 1, 2022 1 hour ago, MistyPhotos said: password: Siskinhospital2022 The password doesn't work. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
MistyPhotos Posted November 2, 2022 Share Posted November 2, 2022 Try this one: Siskinhospital2022! Link to comment
creedon Posted November 2, 2022 Share Posted November 2, 2022 (edited) On 9/22/2022 at 6:04 AM, MistyPhotos said: Is there any way to keep the two columns to only one folder? .Header-inner--top .Header-nav-item:first-child .Header-nav-folder { column-gap : 1rem; display : grid; grid-auto-flow : column; grid-template-columns : repeat( 2, 1fr ); grid-template-rows : repeat( 15, 1fr ); } This is for v7.0 using the Brine template family. Let us know how it goes. Edited July 7 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
MistyPhotos Posted November 8, 2022 Share Posted November 8, 2022 On 11/2/2022 at 3:25 PM, creedon said: .Header-inner--top .Header-nav-item:first-child .Header-nav-folder { column-gap : 1rem; display : grid; grid-template-columns : 1fr 1fr; } Let us know how it goes. Thank you SO much! A miracle! 😉 One more thing, is there a way to make the first column in the services+conditions drop down in alphabetical order moving to the second? Does that make sense? I feel like it doesn't flow well right now. Any thoughts? Link to comment
creedon Posted November 8, 2022 Share Posted November 8, 2022 8 hours ago, MistyPhotos said: is there a way to make the first column in the services+conditions drop down in alphabetical order moving to the second? I have updated my code post. You do have to manually maintain the number of rows. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
MistyPhotos Posted December 19, 2022 Share Posted December 19, 2022 I have changed a few things and now trying to figure out how to change the code to only allow "specialized programs" to be two columns. What do I need to change on the code to make this happen? I don't want "fitness center" to be two columns. Thanks! Link to comment
creedon Posted December 19, 2022 Share Posted December 19, 2022 (edited) On 12/19/2022 at 7:22 AM, MistyPhotos said: I have changed a few things and now trying to figure out how to change the code to only allow "specialized programs" to be two columns. What do I need to change on the code to make this happen? I don't want "fitness center" to be two columns. .Header-inner--bottom .Header-nav-item:nth-child( 4 ) .Header-nav-folder { column-gap : 1rem; display : grid; grid-auto-flow : column; grid-template-columns : repeat( 2, 1fr ); grid-template-rows : repeat( 11, 1fr ); } Each time you change the layout of the header the code will need to be updated. Let us know how it goes. Edited December 21, 2022 by creedon tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
undefined Posted July 6 Share Posted July 6 Hey @creedon tried to pilfer this code, and I can't get it working: https://owl-sepia-z53p.squarespace.com/ Site in progress, but public. I only need the 2nd dropdown to sort into two columns, but changing nth child to 2 in code above doesn't work. Any thoughts? Many thanks in advance! Maria Link to comment
creedon Posted July 7 Share Posted July 7 3 hours ago, undefined said: I only need the 2nd dropdown to sort into two columns, but changing nth child to 2 in code above doesn't work. Any thoughts? The reason it didn't work is because the code is for a v7.0 site using the Brine template family. Your site is v7.1 and needs different code. Add the following to Website > Pages > Website Tools > Custom CSS. .header-nav .header-nav-item--folder:nth-child( 2 ) .header-nav-folder-content { column-gap : 1rem; display : grid; grid-auto-flow : column; grid-template-columns : repeat( 2, 1fr ); grid-template-rows : repeat( 5, 1fr ); } This is for v7.1. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
undefined Posted July 7 Share Posted July 7 It hits the right dropdown, but rather than creating 2 columns, it puts each link into its own column — so I get one long row of navigation links 😞 Link to comment
creedon Posted July 7 Share Posted July 7 (edited) On 7/7/2024 at 8:16 AM, undefined said: It hits the right dropdown, but rather than creating 2 columns, it puts each link into its own column — so I get one long row of navigation links 😞 This is what I see. If this is not the effect you are looking for then you will need different code. Edited July 8 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
undefined Posted July 8 Share Posted July 8 Wow ok, totally a glitch. Popped it in again this morning and it's all good. 👍 THANK YOU! creedon 1 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