Jump to content

How to link navigation folders to landing page 7.1 personal plan

Recommended Posts

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

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
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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.