Jump to content

Make a dropdown navigation folder not clickable

Recommended Posts

Posted

You're a lifesaver!! Thank you!!

Do you know how I would decrease the spacing between the menu and the individual page below them? Just to be able to move them up a little bit?

Posted
16 hours ago, laurentaylar said:

You're a lifesaver!! Thank you!!

Do you know how I would decrease the spacing between the menu and the individual page below them? Just to be able to move them up a little bit?

Can you take screenshot spacing?

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

  • 4 months later...
Posted (edited)

I'm having the same problem that was described in the first post: I'm trying to make it so that the menu isn't clickable in the navigation. So I want only the pages below it to be clickable and not the actual menu. I tried copying and pasting the code that tuanphan wrote above into the Custom CSS box, but nothing changed. I don't understand coding at all, so maybe the formatting was off? Or the words need to be different? My menu is called "Projects" and the two pages in the drop down menu are called "Themed Entertainment" and "Freelance Drafting". So I want "Projects" to not be clickable...Please help!!!

screenshot.jpg

Edited by designspiral
Posted (edited)

Did you give the folder a special slug?  I have worked with my 7.1 and 7.0 lab sites and I don't make changes to the folder slug at all. They are not clickable. The folder name, navigation name, and slug names are all the same, in your case it should be one word for all "projects"  however I think the code modification will also work . 

a.Header-nav-folder-title[href="/projects"] {
 pointer-events: none;
 }  
Edited by derricksrandomviews
  • 1 month later...
Posted
On 2/22/2020 at 4:56 PM, tuanphan said:

Add to Home > Design > Custom CSS


a.Header-nav-folder-title[href="/investment-solutions"], a.Header-nav-folder-title[href="/contact"] {
    pointer-events: none;
}

 

Hello, 

I have tried to work around the above code for my website but it did not work.
I begin to wonder is it because mine is version 7.0

Will appreciate any help or advices for my website https://www.calvinkongphysics.com/
I am trying to make the folders "Register" and "Reviews" to be unclickable.

Template used is Bryant.

Posted
19 hours ago, Calvin_K said:

Hello, 

I have tried to work around the above code for my website but it did not work.
I begin to wonder is it because mine is version 7.0

Will appreciate any help or advices for my website https://www.calvinkongphysics.com/
I am trying to make the folders "Register" and "Reviews" to be unclickable.

Template used is Bryant.

Add to Home > Design > Custom CSS

/* Disable Register Reviews click */
.folder:nth-child(3), .folder:nth-child(4) {
.folder-toggle {
    pointer-events: none;
}
}

 

19 hours ago, derricksrandomviews said:

a.Header-nav-folder-title[href="/folder name goes here"] {
 pointer-events: none;
 }  

Looks like you took care of it. 

 

Recently I wrote this "make folder title not clickable" guide, cover all Squarespace templates (7.0 + 7.1), maybe helpful.

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

  • 1 month later...
Posted

I am trying to do the same thing with my main menu navigation to make some of them not clickable and only the drop down clickable. 
Trying to make Locations, Fitness Programs, FD Rewards and About Us all non clickable.
Website is: https://fdgyms.com/

The above is not seeming to work for me. Any help would be greatly appreciated. 

Posted
17 hours ago, MirandaW said:

I am trying to do the same thing with my main menu navigation to make some of them not clickable and only the drop down clickable. 
Trying to make Locations, Fitness Programs, FD Rewards and About Us all non clickable.
Website is: https://fdgyms.com/

The above is not seeming to work for me. Any help would be greatly appreciated. 

Add to Home > Design > Custom CSS

/* make folder not click */
.Header-nav-folder-title[href="/new-folder"], .Header-nav-folder-title[href="/fitnessprograms"], .Header-nav-folder-title[href="/fd-rewards"], .Header-nav-folder-title[href="/aboutus"] {
    pointer-events: none;
}

 

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

  • 3 months later...
Posted

Hello @tuanphan  

I'm having the exact same problem with my site - www.jamesparker.co - trying to make the "Editorial" and "Commission" titles un-clickable / not have the little hand appear when hovered over the title. 

Currently running the Avenue template - Had a look on your guide and cannot see. 

Cheers 
James

Posted
On 2/17/2021 at 3:47 AM, Jamseyp said:

Hello @tuanphan  

I'm having the exact same problem with my site - www.jamesparker.co - trying to make the "Editorial" and "Commission" titles un-clickable / not have the little hand appear when hovered over the title. 

Currently running the Avenue template - Had a look on your guide and cannot see. 

Cheers 
James

Add to Design > Custom CSS

/* disable folder title click */
li.folder-collection>a {
    pointer-events: none;
}

 

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

  • 3 months later...
Posted
17 hours ago, angeldesign said:

hiya same thing for me the code doesn't seem to be working

 

https://kubohomes.squarespace.com/ PW: kubohomes

 

need the projects nav work to be unclickable  - thanks!

Add to Design > Custom CSS

span.Header-nav-item.Header-nav-item--folder:nth-child(3)>a {
    pointer-events: none;
}

 

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

  • 2 weeks later...
Posted
On 6/5/2021 at 8:04 AM, tuanphan said:

Add to Design > Custom CSS


span.Header-nav-item.Header-nav-item--folder:nth-child(3)>a {
    pointer-events: none;
}

 

thank you so much tuan!

Posted
6 hours ago, nccu99403027 said:

Hi tuanphan,

Thanks a lot for making the "make folder title not clickable" guide! It worked successfully without any issue on the computer version of my website.

However on mobile, the code prevented me from expanding the drop down. The drop down menu doesn't show up after I tapped the folder title.

I am using the "Horizon" template. Thanks a lot!!

Hi. Can you share site url? I can check easier

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

Posted
On 6/18/2021 at 2:54 PM, nccu99403027 said:

Hi tuanphan,

No problem! Here is the url to the website.

https://www.shaotingchang.com/

The navigation folders I was having problems with are "BIO", "ORIGINAL", and "RESCORE".

Thanks again!

Hi. It looks fine here. Did you solve it?

See video. https://www.loom.com/share/48c44506c6a8456094a1a1da04e6d6fc

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

  • 4 months later...
Posted (edited)
On 2/22/2020 at 8:56 AM, tuanphan said:

Add to Home > Design > Custom CSS

a.Header-nav-folder-title[href="/investment-solutions"], a.Header-nav-folder-title[href="/contact"] {
    pointer-events: none;
}

 

Thank you - I've just found this, as I'm persevering with a couple of 7.0 sites and this worked perfectly for me (by editing the hrefs) on charisrefugees.org

Edited by breathedotdesign

 

John

breathe.design

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.