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

Navigation Drop Down Menu into Multiple Columns

Question

Posted (edited)

Hi, please see attached screenshot. I would like my SHOP menu folder to be in two columns with work for sale on the left (Sand Dunes through Books) and information about the work and additional items on the right (About Our Prints through Give the Gift of Art). Right now it is one long menu. At one point I searched this forum and someone posted custom CSS that broke folders into two columns. You could select which drop-down folder to turn into columns and how many columns. This was a great start but you could not determine WHERE the break occurred, it simply broke it up evenly so if I had more than 3-4 pages the product pages would spill over into the information column and be included on the right instead of the rest of the works on the left. Regardless, the link is now dead for this post and so I can not find the CSS script. Basically: I would like a custom CSS that allows me to always have my work for sale separated from the information about the work and make it manageable to sort related works/locations into columns in the future. Ideally, I would have a mega menu with ways to view collections by popularity, theme, etc. but that seems beyond SquareSpace's capabilities at this point (like so many  things...). See second attached.

Screen Shot 2020-01-08 at 12.16.48 PM.png

Screen Shot 2020-01-08 at 12.50.54 PM.png

Edited by JonathanK

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 0
 a[href="/shop"]+.Header-nav-folder a:nth-child(5) {display: none;}

or this

 a[href="/shop"]+.Header-nav-folder a:nth-child(5) {visibility: hidden;}

maybe visibility will work.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)

Can you share link to your site?

or plugin by @paul2009

Edited by tuanphan

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
5 minutes ago, JonathanK said:

https://manatee-ladybug-s9eh.squarespace.com/config/pages

Not sure if this will work. I have a live landing page right now. Working on the rest of the site in the background.

/config is url for site owner


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Add to Home > Design > Custom CSS

[href="/shop"]+.Header-nav-folder {
    column-count: 2;
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)
25 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


[href="/shop"]+.Header-nav-folder {
    column-count: 2;
}

 

Hi Tuan, did you read my original question?. I don't want just two columns. I want two columns which are split in exactly the right place. I don't want them evenly. I don't want them randomly. Sorry to get annoyed but I spent a great deal of time making the original post as clear as possible and even supplied screenshots and an example of what I want.

I want specific pages on the left and specific pages on the right when I split the columns. Can I fake it with blank pages that aren't clickable in the navigation so I push things to the left and right? Can I at least add a horizontal line to separate the columns if it's one long list?

Edited by JonathanK

Share this post


Link to post
  • 0
Posted (edited)

I want the things in red in one column. I want the things not highlighted in red to be another column underneath the same menu.

Screen Shot 2020-01-08 at 7.25.55 PM.png

Edited by JonathanK

Share this post


Link to post
  • 0
Posted (edited)
3 hours ago, MelissaHatcher said:

In Squarespace backend: Appearance > Menus, just drag n drop the menu items to nest under each other

 

I want them under the same menu but in two columns. I would like to be able to decide where those two columns split. i.e. what items are in column 1 and what items are in column 2. Therefore, tuan's code above does not satisfy my requirements because I have no decision on what drop down items spill over into the second column.

Edited by JonathanK

Share this post


Link to post
  • 0

You can control by adding blank nav items, then use CSS to hide them.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
12 minutes ago, tuanphan said:

You can control by adding blank nav items, then use CSS to hide them.

Hi Tuan, great. I was thinking that might be the best solution for now. What is the CSS to hide the blank pages?

Share this post


Link to post
  • 0
4 minutes ago, JonathanK said:

Hi Tuan, great. I was thinking that might be the best solution for now. What is the CSS to hide the blank pages?

Depends...You need to add nav items first.

It will like this (just an example)

a[href="/shop"]+.Header-nav-folder a:nth-child(5)

with 5 is nav item order


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Just now, tuanphan said:

Depends...You need to add nav items first.

It will like this (just an example)

a[href="/shop"]+.Header-nav-folder a:nth-child(5)

with 5 is nav item order

That makes perfect sense. Thanks. I understand how the number would work.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...