Jump to content

Two Columns on Menu File Dropdown - Only ONE folder

Recommended Posts

I have used a code to create two columns for my header menu file dropdown.  But I only want the first folder to have two columns - services+conditions.  The rest I would like to keep one column.  Does anyone have a code for this?  I am using Impact theme.  


Thanks!

 

This is the code I used:

.Header-inner--top .Header-nav-folder {

  column-gap : 1rem;
  display : grid;
  grid-template-columns : 1fr 1fr;
  
  }

IMG_8400.jpeg

IMG_8399.jpeg

Link to comment
  • Replies 5
  • Views 223
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

You need to target just one, and can use nth-child(n) to do this, see below:

.Header-inner--top .Header-nav-folder:nth-child(2) {
  column-gap : 1rem;
  display : grid;
  grid-template-columns : 1fr 1fr;  
}

Change out the (2) to target the correct folder.

Let me know if this has helped!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
38 minutes ago, Ziggy said:

You need to target just one, and can use nth-child(n) to do this, see below:

.Header-inner--top .Header-nav-folder:nth-child(2) {
  column-gap : 1rem;
  display : grid;
  grid-template-columns : 1fr 1fr;  
}

Change out the (2) to target the correct folder.

Let me know if this has helped!

This did not work.  Is this coding used alone or with the other code?  Is the (2) replaced with (Services + Conditions)?   Thanks!

Link to comment

Sorry for not explaining more, the (2) needs to change to reflect the position of the menu item in the navigation. e.g. if it's the fourth item, change the (2) to (4), if if the first item, change it to (1).

If you can share the website (and sitewide password) it makes it easier to provide assistance.

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
3 hours ago, Ziggy said:

Sorry for not explaining more, the (2) needs to change to reflect the position of the menu item in the navigation. e.g. if it's the fourth item, change the (2) to (4), if if the first item, change it to (1).

If you can share the website (and sitewide password) it makes it easier to provide assistance.

It still does not work.  The website is still under construction so it is not live yet.  

Link to comment

You can set a site wide password and share that before the website is live:

Set a site-wide password

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.