Palmside Posted December 9, 2021 Share Posted December 9, 2021 Hey all, I'm having a similar problem, I basically need the items inside a drop down menu to not be clickable. On this website: https://hyperboloid-manatee-wxd9.squarespace.com/ Password: 123 I need the items that appear in the drop down menu for 'Services' to be unclickable, so it is effectively just a list. Can't seem to get it to work with CSS for some reason, thanks in advance! Link to comment
creedon Posted December 9, 2021 Share Posted December 9, 2021 (edited) @Palmside Add the following to Design > Custom CSS. /* begin services menu no links */ /* desktop */ .header-nav .header-nav-item--folder > [href="/services"] + .header-nav-folder-content .header-nav-folder-item { pointer-events : none; } /* mobile */ .header-menu-nav-folder[data-folder="/services"] .header-menu-nav-item--external { pointer-events : none; } /* end services menu no links */ This is for v7.1 and specific to the poster's need. Let us know how it goes. Edited December 9, 2021 by creedon version 2 Palmside 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
Palmside Posted December 9, 2021 Share Posted December 9, 2021 2 hours ago, creedon said: @Palmside Add the following to Design > Custom CSS. /* begin services menu no links */ /* desktop */ .header-nav .header-nav-item--folder > [href="/services"] + .header-nav-folder-content { pointer-events : none; } /* mobile */ .header-menu-nav-folder[data-folder="/services"] .header-menu-nav-item--external { pointer-events : none; } /* end services menu no links */ This is for v7.1 and specific to the poster's need. Let us know how it goes. Hey yep this seems to work well, thank you @creedon! Is there anyway to have the drop down menu still appear when scrolling down from 'Services', over the sub categories 'Weddings' etc; but have the subcategory links within it unclickable? No worries if not, this works too! Link to comment
creedon Posted December 9, 2021 Share Posted December 9, 2021 32 minutes ago, Palmside said: Is there anyway to have the drop down menu still appear when scrolling down from 'Services', over the sub categories 'Weddings' etc; but have the subcategory links within it unclickable? I have updated my code post. 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
tonicastudio Posted January 25, 2022 Share Posted January 25, 2022 (edited) On 12/10/2021 at 3:37 AM, creedon said: @creedon Add the following to Design > Custom CSS. /* begin services menu no links */ /* desktop */ .header-nav .header-nav-item--folder > [href="/services"] + .header-nav-folder-content .header-nav-folder-item { pointer-events : none; } /* mobile */ .header-menu-nav-folder[data-folder="/services"] .header-menu-nav-item--external { pointer-events : none; } /* end services menu no links */ This is for v7.1 and specific to the poster's need. Let us know how it goes. Hey, is it possible to do something like this for portfolio sections? I am using a portfolio on hover where gifs are showing as the picture but would like to make those individual project links unclickable. site: tonicabrandstudio.com pw: australia then go to menu>example. Thank you! Edited January 25, 2022 by tonicastudio Link to comment
creedon Posted January 26, 2022 Share Posted January 26, 2022 (edited) Ignore this folks! I was completely off track here. On 1/25/2022 at 4:05 AM, tonicastudio said: Hey, is it possible to do something like this for portfolio sections? Add the following to Design > Custom CSS. [data-section-id="61ed52923ad0a2796cf80056"] .portfolio-hover-item { pointer-events : none; } This is for v7.1 and specific the the poster's need. Let us know how it goes. Edited January 27, 2022 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
tonicastudio Posted January 26, 2022 Share Posted January 26, 2022 (edited) 9 minutes ago, creedon said: Add the following to Design > Custom CSS. [data-section-id="61ed52923ad0a2796cf80056"] .portfolio-hover-item { pointer-events : none; } This is for v7.1 and specific the the poster's need. Let us know how it goes. @creedon so close! it does work, but now the images are not showing up at all or the background fill doesn't change colour. I've seen it done in the second section of this website if it helps:https://standoutsquare.space/ Edited January 26, 2022 by tonicastudio Link to comment
creedon Posted January 27, 2022 Share Posted January 27, 2022 20 hours ago, tonicastudio said: so close! it does work, but now the images are not showing up at all or the background fill doesn't change colour. Ah now that I reflect that makes sense. Please see Portfolio Project Link Remove. You can skip the first quick install step as you already have jQuery installed. Let us know how it goes. tonicastudio 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
tonicastudio Posted January 27, 2022 Share Posted January 27, 2022 15 minutes ago, creedon said: Ah now that I reflect that makes sense. Please see Portfolio Project Link Remove. You can skip the first quick install step as you already have jQuery installed. Let us know how it goes. @creedon hmm still doesn't seem to work. I copy and pasted the link exactly as is in the portfolio page's code header injection, but the link is still showing up 🤷♀️ Link to comment
creedon Posted January 27, 2022 Share Posted January 27, 2022 (edited) 52 minutes ago, tonicastudio said: hmm still doesn't seem to work. Please see step two of the quick install instructions. You installed the code in Settings > Advanced > Code Injection > HEADER which is the incorrect location. Edited January 27, 2022 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
tonicastudio Posted January 27, 2022 Share Posted January 27, 2022 10 minutes ago, creedon said: Please see step two of the quick install instructions. You installed the code in Settings > Advanced > Code Injection > Header which is the incorrect location. @creedon So I installed the code in the portfolio page> settings>advanced>page header code injection (second picture attached). Sorry, do you mean the individual project page's settings? I just tried to insert it in the individual project's page but there isn't a place to c&p the code? Link to comment
creedon Posted January 27, 2022 Share Posted January 27, 2022 11 minutes ago, tonicastudio said: So I installed the code in the portfolio page> settings>advanced>page header code injection (second picture attached). That is the correct location but apparently your jQuery is not in Settings > Advanced > Code Injection > HEADER. It appears that your jQuery is installed in Settings > Advanced > Code Injection > FOOTER. tonicastudio 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
tonicastudio Posted January 27, 2022 Share Posted January 27, 2022 (edited) 12 minutes ago, creedon said: That is the correct location but apparently your jQuery is not in Settings > Advanced > Code Injection > HEADER. It appears that your jQuery is installed in Settings > Advanced > Code Injection > FOOTER. Amazing! I just c&p the jQuery you've provided into the header and now it works! Thank you so much! I do have another question related to this if you get another moment to help. I've added the below code into design>css to decrease the portfolio section's height/padding, which worked perfectly. But now, the images/gifs are cut off on desktop (works fine on mobile). Any idea why that is? I've played around with different height values but it didn't seem to work. /* portfolio height */ @media screen and (min-width:768px) { [data-section-id="61ed52923ad0a2796cf80056"] { min-height: 30vh !important; height: 50vh; } .portfolio-hover-display { min-height: unset !important; height: 100% !important; } [data-section-id="61ed52923ad0a2796cf80056"] .content-wrapper { height: 50% !important; } Edited January 27, 2022 by tonicastudio Link to comment
creedon Posted January 27, 2022 Share Posted January 27, 2022 1 minute ago, tonicastudio said: Amazing! I just c&p the jQuery you've provided into the header and now it works! Be sure to remove the jQuery from Settings > Advanced > Code Injection > FOOTER, if it is there. Having more than one jQuery installed can cause problems. tonicastudio and tuanphan 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
ArtSpeaks Posted January 31, 2022 Share Posted January 31, 2022 @tuanphanThank you so much! It worked but now when i click the title of the heading the menu folder closes! What should i do ? Link to comment
tuanphan Posted February 4, 2022 Share Posted February 4, 2022 On 2/1/2022 at 4:36 AM, ArtSpeaks said: @tuanphanThank you so much! It worked but now when i click the title of the heading the menu folder closes! What should i do ? What is your site url? 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
OHDL Posted June 7, 2022 Share Posted June 7, 2022 Thanks to everyone who answered to the above question. Additionally to making the folder not clickable, how would you prevent search engines finding this page? no-follow link? Link to comment
plasticfreemke Posted February 27, 2023 Share Posted February 27, 2023 Hi! I have successfully made one folder on my site unclickable, but am having trouble with making multiple folders unclickable. Is there a code that I can use for multiple folders? Also, how do you insert folder names that have spacing, such as "How to Help" , into the code? Do you include the spacing in the code or would you insert it "howtohelp"? Here is the URL to our website! https://www.plasticfreemke.org/ Thank you Link to comment
creedon Posted February 27, 2023 Share Posted February 27, 2023 (edited) On 2/27/2023 at 2:09 PM, plasticfreemke said: Is there a code that I can use for multiple folders? Sure. Drop the attribute selector portion of the selector. a.Header-nav-folder-title { pointer-events : none; } This for v7.0 using the Brine template family. Let us know how it goes. Edited November 14, 2023 by creedon plasticfreemke and tuanphan 1 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment