Jump to content

[Share] 2 Columns Dropdown

Recommended Posts

Posted

Suppose we need to change Portfolio dropdown to 2 columns.

image.png.0c362b6272ed5f47d118681a44270393.png

#1. First, you need to know this.

image.png.670a55ac0274f48d39df7dd2eb017c76.png

In my example, Portfolio will be nth-child(3), so Its ID:

div.header-nav-item:nth-child(3) div.header-nav-folder-content

#2. Next, use this code to Custom CSS box

div.header-nav-item:nth-child(3) div.header-nav-folder-content {
    column-count: 2;
    column-gap: 5px;
}

image.png.838a6cdfa152e6256e06f11ccef774c4.png

Result

image.png.886afa3566037ea542dce160a3f5a030.png

#3. If you want to change gap between 2 columns.

image.png.d6679c199e0e2fec261bbffc50bb1fee.png

You can use this CSS code. Then adjust 25px in column-gap code.

div.header-nav-item:nth-child(3) div.header-nav-folder-content {
    column-count: 2;
    column-gap: 25px;
    min-width: unset !important;
}

image.png.1d6123b783a83c7e7d2b02ad559f5d78.png

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

  • Replies 0
  • Views 79
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

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.