Jump to content

Make a dropdown navigation folder not clickable

Recommended Posts

@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 by creedon
version 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
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
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
  • 1 month later...
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 by tonicastudio
Link to comment

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 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
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 by tonicastudio
Link to comment
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.

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
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
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 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
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? 

Screen Shot 2022-01-27 at 1.44.51 PM.png

Screen Shot 2022-01-27 at 1.52.18 PM.png

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

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
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;
}

 

Screen Shot 2022-01-27 at 2.19.35 PM.png

Screen Shot 2022-01-27 at 2.20.55 PM.png

Edited by tonicastudio
Link to comment
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.

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
  • 4 months later...
  • 8 months later...

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
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 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

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.