Custom CSS for Menu Navigation

Site URL: https://pike-guava-36n7.squarespace.com/

Hi There, 

I asked squarespace the below question and they said it needs to be done with custom css & to consult the forums. Hoping someone knows how to do this. 

I am having an issue with my navigation, for my “recipes” folder, I am unable to click on this as a link, but have to hover to get the additional pages. 
I am hoping to have if I click just “recipes” it will direct to the “all recipes page”. So basically I want the “All Recipes” at the top (just written as ‘recipes’), And underneath the same page again “All recipes” (so it will be twice), and then “breakfast” etc. 

Hope that makes sense, I can’t figure it out, cause its in a folder? Yet still has a unique url? But its not clickable? 
Please see screenshots. 

Thank you!

Footer code injection (requires premium or commerce account)

$(document).ready(function() {
    $('.header-nav .header-nav-folder-title[href="/recipes1"]').click(function() {
        window.location.href = '/recipes';
        return false;
    });
});

@Jodi_Ctrl Came up with an interesting CSS only idea to try to solve this issue that I helped refine. Check my last post on that thread. Perhaps you can adapt this technique to your situation.

Let us know how it goes whichever way you go.

13 minutes ago, creedon said:

@Jodi_Ctrl Came up with an interesting CSS only idea to try to solve this issue that I helped refine. Check my last post on that thread. Perhaps you can adapt this technique to your situation.

Let us know how it goes whichever way you go.

Interesting fix. It gives kind of a weird shadow on the mouse over though. I think with a little refinement, that could be a good work around.

Possibly targeting the href and setting the background color to black, to hide the original link?

Just now, rwp said:

Interesting fix. It gives kind of a weird shadow on the mouse over though. I think with a little refinement, that could be a good work around.

Right the OP hasn't implemented my most recent CSS which I think will address that issue.

The Javascript method is less fiddly and prone to rendering issues and if one is already using jQuery (which @staaaceeey is) is a great option.

But if for some reason Javascript isn't an option then the CSS only method is worth a try.

18 hours ago, creedon said:

Right the OP hasn't implemented my most recent CSS which I think will address that issue.

Creedon is absolutely right, his updated code did exactly what I wanted it to: