Jump to content

Custom CSS for Menu Navigation

Recommended Posts

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!


 

 

image002.png

Link to comment
  • Replies 6
  • Views 778
  • Created
  • Last Reply

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

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

 

image.png

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

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

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.

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

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.