Disable the link on navigation folders in Brine template

Hello! Does anyone know how I can disable the link on the folder navigation? Currently when you click the folder it defaults and links to the first page in the folder. I do not want it to link to any page and act solely as a folder for the pages. Anyone know the code that will help me achieve this? I am using Brine. 

Thank you! 

Nikkole 

Can you share link to your site?

I also am trying to do this... It's very frustrating!!

I think I actually just figured it out! I did it this way because I didn't want to affect the mobile menu when I clicked on the folder, so this was a way around that. I did this for the 'work' tab/folder/dropdown option in the navigation of my portfolio/design site because I didn't want the folder to link to anything at all. Let me know if you have questions! 

@media screen and (min-width: 640px){

  a.Header-nav-folder-title.Header-nav-folder-title--active {
    pointer-events: none;
    cursor: default; }
}

Note: I also used this site for reference/help.

I also added this ***very important***

@media screen and (min-width: 640px){
  
  a.Header-nav-folder-title.Header-nav-folder-title--active {
    pointer-events: none;
    cursor: default; }
  
/* this part here is really important for when I'm not on any of the pages within the folder */  
  
  a.Header-nav-folder-title {
    pointer-events: none;
    cursor: default; }
  }

Thanks so much for sharing this, @spencerhaddy I had a client who needed this and it worked like a charm!

The above code didn't work on Brine for me -- any updated code

11 hours ago, lovelylittledesignco said:

The above code didn't work on Brine for me -- any updated code

can you share link to your site?

Hi,

I need help with this please, on 7.1.... I can't seem to change the cursor on all my folder titles (which don't link to anything, its just a dropdown to a few links) so I'd like the arrow cursor to appear on hover.

Would really appreciate help please 🙂

Thank you!

@xime

Please post the URL to your site.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Hello,

I am also trying to do this and the above code doesn't seem to work for me, unless I'm doing something wrong! 

Link is:
https://impala-rabbit-6txd.squarespace.com

Password: 
MayamikoTrust

Could anyone point me in the right direction? I want to make the 'What we do' and 'Support us' unclickable in the nav so they have to choose a page option. 

@MeganHope

Add the following to Design > Custom CSS.

.Header-nav-folder-title {

  pointer-events : none;
  
  }

This is for v7.0 using the Brine template family.

Let us know how it goes.

Hey @creedon that did the trick, thanks so much!

For version 7.1 sites, you can use the following code in the Design -> Custom CSS panel:

/* Disable click on folder link */
a.header-nav-folder-title[href="/url-slug"] {
  pointer-events: none;
  cursor: default;
}

Change the "url-slug" text with the URL slug of the folder, which can be found in the setting options of the folder (cog/sun/flower icon)

Any updates on this? This code doesn't work on my website: 

/* Disable click on folder link */
a.header-nav-folder-title[href="/url-slug"] {
  pointer-events: none;
  cursor: default;
}

Im using the 7.1 version

@Vivaldi @ondeline

I'm confused. v7.1 doesn't support active folder links as some v7.0 template do. So you shouldn't need to add CSS to disable that behaviour.

If your navigation folders links are active I'd like to see your sites.

To be clear I'm talking about the folder titles themselves not the folder contents.