Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to link navigation folders to landing page 7.1 personal plan


stephanilewis

Question

Site URL: https://flounder-leopard-83wn.squarespace.com/config/

Hello,

I am building a portfolio website and I have run into an issue now that I'm out of the trial phase. I would like to make the button (built as folders to contain the individual pages within each category) in the navigation bar (Television, Film, Commercial, and Press) link to the landing page for each of those categories.

URL: https://flounder-leopard-83wn.squarespace.com/config/
Password: newyork11

I'm working in 7.1 and it's a Personal Plan (this is a site for someone else so there is no option for a Business Plan).

Link to comment

9 answers to this question

Recommended Posts

  • 0
13 minutes ago, astpaul said:

Site URL: https://flounder-leopard-83wn.squarespace.com/config/

Hello,

I am building a portfolio website and I have run into an issue now that I'm out of the trial phase. I would like to make the button (built as folders to contain the individual pages within each category) in the navigation bar (Television, Film, Commercial, and Press) link to the landing page for each of those categories.

URL: https://flounder-leopard-83wn.squarespace.com/config/
Password: newyork11

I'm working in 7.1 and it's a Personal Plan (this is a site for someone else so there is no option for a Business Plan).

I realized I included the wrong URL information.
URL: https://www.stephanilewis.com/
Password: newyork11

Link to comment
  • 0

not without some javascript (business plan). 

The generally accepted layout for menu items that need/want to have an overview is to create that overview page and just place it first in the list/folder.

So in your case https://www.stephanilewis.com/television would be the first item listed under the folder "Television".

I believe they removed the functionality for clickable folders as it caused issues for mobile users. (don't quote me on that though)

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

Link to comment
  • 0
4 hours ago, IgnitePerth said:

not without some javascript (business plan). 

The generally accepted layout for menu items that need/want to have an overview is to create that overview page and just place it first in the list/folder.

So in your case https://www.stephanilewis.com/television would be the first item listed under the folder "Television".

I believe they removed the functionality for clickable folders as it caused issues for mobile users. (don't quote me on that though)

Dang, ok. Not what I wanted to hear but I guess there isn't another way. Thanks for the info, I really wish Squarespace would build this is as an option! Seems silly that it can't be done.

Link to comment
  • 0
On 9/17/2021 at 10:06 AM, astpaul said:

Yes, I do need help with this if possible!

With your plan, edit Site Footer >> Add a Markdown Block >> Paste this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('a.header-nav-folder-title[href="/folder-television"]').click(function() {
			var link = $(this).text(),
				href = "/television";
			window.location.href=href;
		});
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
14 hours ago, tuanphan said:

With your plan, edit Site Footer >> Add a Markdown Block >> Paste this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('a.header-nav-folder-title[href="/folder-television"]').click(function() {
			var link = $(this).text(),
				href = "/television";
			window.location.href=href;
		});
});
</script>

 

Amazing, that worked perfectly! Thank you times a million.

I want to do the same thing with the additional navigation folder items (Film, Commercial, and Press), so I changed the code to this and dropped it in the same markdown block:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('a.header-nav-folder-title[href="/folder-film"]').click(function() {
			var link = $(this).text(),
				href = “/film";
			window.location.href=href;
		});
});
</script>

It doesn't seem to be working. Do I need to change the https link as well? Put it in its own markdown box? Thanks so much.

Link to comment
  • 0
40 minutes ago, astpaul said:

Amazing, that worked perfectly! Thank you times a million.

I want to do the same thing with the additional navigation folder items (Film, Commercial, and Press), so I changed the code to this and dropped it in the same markdown block:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('a.header-nav-folder-title[href="/folder-film"]').click(function() {
			var link = $(this).text(),
				href = “/film";
			window.location.href=href;
		});
});
</script>

It doesn't seem to be working. Do I need to change the https link as well? Put it in its own markdown box? Thanks so much.

@tuanphan never mind, I figured it out 🙂 thank you very very much, I appreciate your help a ton!

Link to comment
  • 0
On 9/20/2021 at 8:53 PM, stephanilewis said:

@tuanphan never mind, I figured it out 🙂 thank you very very much, I appreciate your help a ton!

Okay. For future comments, use this combine code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('a.header-nav-folder-title[href="/folder-television"]').click(function() {
			var link = $(this).text(),
				href = "/television";
			window.location.href=href;
		});
  		$('a.header-nav-folder-title[href="/folder-film"]').click(function() {
			var link = $(this).text(),
				href = "/film";
			window.location.href=href;
		});
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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