Drop Down Navigation Menu too long, need to make it in columns

Highlighted
Tourist
7 0 5

Hello, my shop http://canvaselite.myshopify.com/ psswd: schaws,

I have a Menu in my Navigation bar that is Artist, and my store provides a large variety, so the list is too long and does not fit,so customers have to scroll in order to see the rest of the list. Is there a way to make as a several columns for drop down?

 

Thanks,

Charles

http://canvaselite.com/

0 Likes
Highlighted
New Member
14 0 0

Hi, you seemed to have found a solution to your linklist to display columns - how did you do this? I am on the Minimal Theme and want to add more choices (sweaters/cardigans/tops,etc) to my "our COLLECTION" linklist, but don't want the dropdown menu to be too long...

my site is here: http://www.leave-nothing-but-footprints.myshopify.com

0 Likes
Highlighted
Shopify Expert
9933 106 1766

This will get you on your way. Be aware that this change will effect all your dropdowns so be sure to adapt to your needs.

All the changes will be made within the styles.css.liquid. See notes below:

/* around line 306 */
nav > ul > li.dropdown > .dropdown {
   background: #ffffff;
   list-style: none outside none;
   padding: 5px 15px;
   display: none;
   position: absolute;
   min-width: 180px; /* <--------- CHANGE TO 360px */
   z-index: 99999;
   top: 100%;
   left: 0%;
   margin-left: 15px;
   border: 1px solid #dddddd;
}
/* around line 308 */
nav > ul > li.dropdown li {
     list-style: none;
     font-size: 13px;
     line-height: 30px;
     width: 50%; /* <------ add this */ 
     float: left; /* <------ add this */ 
}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
14 0 0

Thank you so much for your help! i got it working. http://www.leave-nothing-but-footprints.myshopify.com

0 Likes
Highlighted
New Member
10 0 0

hi, 

I am also using the same theme but cant seem to get this to work. 

my line 306 and 308 belongs in the button setting. dont know if i am doing it right. please help. thank you.

0 Likes
Highlighted
Tourist
28 0 1

I was trying to do the same thing but using the classic theme, I couldn't find a styles.css.liquid anywhere to place this code in.

0 Likes
Highlighted
New Member
1 0 0

I wasn't able to find the styles.css.liquid either. Please help or share a detailed step-by-step process.

0 Likes
Highlighted
Tourist
37 0 1

hi Elaine,

 

you wer able to get this working it seems. Can you point me in the right direction. I am also using minimal theme but do not see a style.css.liquid asset to edit.

 

Thanks

0 Likes
Highlighted
Shopify Partner
19 0 2

Hi Wade,

The stylesheets for the Minimal theme are found in the Assets folder.  It should be labled theme.scss.liquid or timber.scss.liquid if you are using a recent version of the minimal theme.  As to where edits go exactly, I am unsure.  I've just started looking into using columns in the dropdown menu.

Hopefully this helps a bit.

***UPDATE***

I can't say if this will work for anyone else, but I did get it to work on my site. 
In my timber.scss.liquid I added
 min-width: 540px;

directly below:

/*================ Dropdowns ================*/
.site-nav__dropdown {

I wanted each column to be 180px and I wanted 3 columns so I came up with a minimum width of 540px.

Then I added:
 width: 33%;
 float: left;

directly below:
 

.site-nav__link {

The percentage will depend on how many columns you would like.  Mine was 3 so I needed 33%. For 2 50% and 4 25% and so on.

Again, I don't know if it will work for you, but it did for me.

0 Likes
Highlighted
Excursionist
50 0 3

Hi,

In our store url we have menu items as collection.When we hover on collections the dropdown is too long and items at end are not able to see.

 can you please tell how to divide dropdown under collections in to two columns.our storeurl is https://www.gullylivefast.com/

 


gullycollectiion.pnghow to divide the

 

 

 

 

0 Likes