CSS for creating columns in Navigation folder drop-down

Site URL: https://www.mymichiganbeach.com

Hi, 

I am looking for some custom CSS for to create columns in my navigation drop down. I gave a list of locations that is too long, and I would like it to appear in columns when it drops down.

My website is: www.mymichganbeach.com. The nav item is "locations."

Thank you in advance for your help,

Jill Halpin 

Is there any way to keep the two columns to only one folder?  I need the others to stay in one column.

Thanks!

Misty

On 9/22/2022 at 8:04 PM, MistyPhotos said:

Is there any way to keep the two columns to only one folder?  I need the others to stay in one column.

Thanks!

Misty

What is your site url? We can take a look

On 9/24/2022 at 4:05 AM, tuanphan said:

What is your site url? We can take a look

It is still in progress.  Not live yet.  

7 hours ago, MistyPhotos said:

It is still in progress.  Not live yet.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

falcon-khaki-f3fl.squarespace.com

password: Siskinhospital2022

Thanks!

1 hour ago, MistyPhotos said:

password: Siskinhospital2022

The password doesn't work.

Try this one:

Siskinhospital2022!

On 9/22/2022 at 6:04 AM, MistyPhotos said:

Is there any way to keep the two columns to only one folder?

.Header-inner--top .Header-nav-item:first-child .Header-nav-folder {

  column-gap : 1rem;
  display : grid;
  grid-auto-flow : column;
  grid-template-columns : repeat( 2, 1fr );
  grid-template-rows : repeat( 15, 1fr );
  
  }

Let us know how it goes.

On 11/2/2022 at 3:25 PM, creedon said:

 

.Header-inner--top .Header-nav-item:first-child .Header-nav-folder {

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

Let us know how it goes.

Thank you SO much!  A miracle! 😉  One more thing, is there a way to make the first column in the services+conditions drop down in alphabetical order moving to the second?  Does that make sense?  I feel like it doesn't flow well right now.  Any thoughts?  

8 hours ago, MistyPhotos said:

is there a way to make the first column in the services+conditions drop down in alphabetical order moving to the second?

I have updated my code post. You do have to manually maintain the number of rows.

I have changed a few things and now trying to figure out how to change the code to only allow "specialized programs" to be two columns.  What do I need to change on the code to make this happen?  I don't want "fitness center" to be two columns.

Thanks!

On 12/19/2022 at 7:22 AM, MistyPhotos said:

I have changed a few things and now trying to figure out how to change the code to only allow "specialized programs" to be two columns.  What do I need to change on the code to make this happen?  I don't want "fitness center" to be two columns.

.Header-inner--bottom .Header-nav-item:nth-child( 4 ) .Header-nav-folder {

  column-gap : 1rem;
  display : grid;
  grid-auto-flow : column;
  grid-template-columns : repeat( 2, 1fr );
  grid-template-rows : repeat( 11, 1fr );
  
  }

Each time you change the layout of the header the code will need to be updated.

Let us know how it goes.