Making clickable main page with sub pages

Hi,

Most sites allow the creation of a Main page that is a clickable link to all dropdown sub pages.

Example

Products-clickable link that takes you to every page listed below as a grid display of all products.

product-A dropdown menu, clicking this takes you to product A

product-B dropdown menu, clicking this takes you to product B

product-C dropdown menu, clicking this takes you to product C

Is there a way to do this on squarespace?  I see you can make folders with a dropdown menu, but then the folder itself is not clickable...

Thanks

Possible but under certain parameters. 

1. You can have an index page with thumbnails of all the pages in that index but you cannot put an index page in an index page. 

2 You cannot put a folder in an index page either. Folders cannot go into folders. 

3, Summary Blocks on a page work like an index and they can be placed in an index as well. Summaries in 7.0 pull content from blogs, projects, shop pages and gallery pages. 

This explains things a bit more. https://support.squarespace.com/hc/en-us/articles/205813748-Folders-vs-Index-Pages and this would be good for you to see as well:

https://chloeforbesk.com/blog/squarespace-drop-down-menu

Hi.

If you share link to your site, we can give the code to make folder title clickable.

Hi thanks for replying, my site is not currently published yet.

Here is a code injection I did to make a products folder a clickable link.

<script>
  (function()
  {window.addEventListener("load",function(){
    var tours = document.querySelector('[href="/products-folder"]');
    tours.addEventListener("click",function(){
      window.location="/products";
    });
  })}
  )();
</script>

It is working for desktop view, but not mobile view.  On desktop view it makes the screen flash twice like the page has reloaded as well though.

Any idea or suggestions to fix this?

It will not work on mobile, due to the fact that mobile has no hover function. Mobile viewers have to touch the folder to open it, if it were to work they would not able to select any item in the folder other than the page the clickable folder goes to.  

15 hours ago, derricksrandomviews said:

It will not work on mobile, due to the fact that mobile has no hover function. Mobile viewers have to touch the folder to open it, if it were to work they would not able to select any item in the folder other than the page the clickable folder goes to.  

 

I think it is wise for me to simply hope for an update in the future, that allows Folders to be clickable like most websites.

The site is now published https://www.octaneworkholding.com/index.html , but on mobile view the gallery on the homepage has a lot of white space above and below.  Is there a way to reduce this?  The SSL security also is working right yet, it is pointing to my domain. 

SSL certificate propagation, it takes about a day for it to make its way thru the internet.  This code is used by many to clean up some of the empty white space on mobile: Add to LAST LINE in Home > Design > Custom CSS

@media screen and (max-width:767px) {
#page article section:first-child {
    padding-top: 20px !important;
}
}

I tried this, it does not change anything?

Thanks

Well, if one thing doesn't work try something else:

@media screen and (max-width:640px) {
body {
    margin-top: 0 !important;
}
}

I tried to override it on mobile like have a click event on the span tag of the text while the arrow icon in its default action of opening the sub pages but still it doesn't work.

I think this kind of set up is quite good, right?