Jump to content

Customized Two Column Navigation?

Recommended Posts

Currently the  navigation is a single column. I would like to make it  capable of being 2 column and to  dynamically  fill  to  fit that way.
I want to  know if  there is a  JSON-T Directive to get the current item being  printed in a loop like this:
{.repeated section items}
            <a href="{collection.fullUrl}" class="Header-nav-folder-item{.if active} Header-nav-folder-item--active{.end}" data-test="template-nav">{collection.navigationTitle}</a>
            {.section externalLink}
              <a href="{url}"{.section newWindow} target="_blank"{.end} class="Header-nav-folder-item">{title}</a>
My  thought is  to  create 2  navigation  columns  based on the  number of  items in the  dropdown  navigation. I would  get the  number of  items in the  navigation by  using this variable  directive:
{.var @myLen items|count}
Then I would create another variable to  find the  halfway point where I  should  start navigation items to the other column:
{.var @halfLen @myLen/2}
I would  then  need to  know  what Item I am  iterating on (IE whether it is  element 1, 2, etc). I don't know if there is a directive for this though.
After that is known I would be able to  first end the  first  column then  start the second  column of this  navigation menu. This should allow me to make this idea work.
Is there a directive that will allow me to  make this  work or an alternate solution to making a 2 column layout without  hardcoding the header-nav.block file? Thank you.
Link to comment
  • Replies 1
  • Views 321
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.