Re: Multi-column drop down menu in Debut theme

Solved

Multi-column drop down menu in Debut theme

aamirch
Shopify Partner
13 0 0

Hello,

I have been trying for hours to figure this out. Two of our drop down menus are too long and we need to split them into two columns. Is there any help or advice? my theme is Debut theme

Accepted Solution (1)
Jasoliya
Shopify Expert
4820 625 1224

This is an accepted solution.

Hi,

Follow this:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

#SiteNavLabel-solvents { width: auto; }
#SiteNavLabel-solvents ul { column-count: 2; }
#SiteNavLabel-solvents ul li {-webkit-column-break-inside: avoid;page-break-inside: avoid;    break-inside: avoid; }

Note: I have given this css base on current theme.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 194 (194)
mini-mall
Visitor
3 0 0
DAMV
New Member
6 0 0

Non cela ne m'aide pas. J'ai lu et relu, j'ai regardé la vidéo mais aucune explication concrète.


@mini-mall wrote:

Hi @DAMV maybe this can help you https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links/drop-down-menus


 

DAMV
New Member
6 0 0

Salut Minimal, Désolée mais je ne peux pas t'aider. Par contre tu as réussi à avoir des menus déroulants qui fonctionnent chez toi. Je n'y arrive même pas. Peux tu m'aider ? Un grand merci d'avance. DAMV shop

BrendaSauvage
Tourist
6 0 0

Hi @Jasoliya 

I'm trying to make a multi column dropdown menu only for PRODUCTORES. I haven't been able to make any of the code posted here work.

www.salvajevinos.com

Jasoliya
Shopify Expert
4820 625 1224

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

#SiteNav > li:first-child ul{column-count: 2;}

Note: keep this menu at first position otherwise code will not work. 

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
BrendaSauvage
Tourist
6 0 0

Thanks so much @Jasoliya . It worked perfect 🙂 Do you know how I can make it work for the mobile version?

 

Thanks a lot really!!

Jasoliya
Shopify Expert
4820 625 1224

Try this one but it will not work accurately because for that need to change other code too.

#MobileNav > .mobile-nav__item:first-child > .mobile-nav__dropdown { column-count: 2;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
fiberoptics03
Visitor
3 0 0

Hi @Jasoliya 

Please can you assist with my drop down menu. My links go longer than the page, is there a way to add code to fix this issue.
I also require to add divider lines going down the drop downs.

Website url www.magiccloudsvapoury.co.za 

 

password ezeezu

 

Kind regards 

Trishan

BrendaSauvage
Tourist
6 0 0

Hi Jasoliya,

I still haven't figured out how to make the drop down menu work properly on the mobile version. Is it a lot of code I need to change in order to see the columns properly from the PRODUCTORES menu on mobile?

www.salvajevinos.com

 

CHeers, 

 

 

Jasoliya
Shopify Expert
4820 625 1224

Yes need some customization.

You have to add column count only for desktop not mobile, then add this code for mobile

.mobile-nav__dropdown{max-height: 500px; overflow-y: scroll; }

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
BrendaSauvage
Tourist
6 0 0

Thank you worked perfectly.

Arties
New Member
5 0 0

Using the Kala Theme, I have tried a number of the previous fixes, none of the code seems to work in my theme.

https://artiesmusiconline.com.au/

I have a few longer menus that I want to split up.

Jasoliya
Shopify Expert
4820 625 1224

HI, if you looking for "Back to school" menu then follow this:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss Or theme.css->paste bellow code in bottom of file

 

@media only screen and (max-width: 767px) {
.header-menu-content > li:nth-child(3) > .menu{    column-count: 2;}        
    }

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Arties
New Member
5 0 0

scss code.png

I don't have a theme.scss file. I've been trying the fixes in the style.scss.liquid file, which i think is the right one?
still didn't have columns with that code (if i'm indeed putting it in the right place)

 

Arties
New Member
5 0 0

tried it in style-desktop and style-rtl-desktop as well

Jasoliya
Shopify Expert
4820 625 1224

You can add in any working css file, may be in "custom.scss.css" at bottom of file 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Arties
New Member
5 0 0

Tried in a number of scss files, didn't want to work.

Jasoliya
Shopify Expert
4820 625 1224

ok, try to add in Layout->theme.liquid just before </body>

<style>
@media only screen and (max-width: 767px) {
.header-menu-content > li:nth-child(3) > .menu{    column-count: 2 !important;}        
    }
</style>
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Arties
New Member
5 0 0

There were 2 separate <body></body> tags in that file, would not work in either.

Thanks for trying though!

Jasoliya
Shopify Expert
4820 625 1224

I can see you have not added code. add me staff, i sent you access request check. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Mark118
Excursionist
55 0 4

Hi Jasoliya

Please can you help - I'm using Impluse theme but the code below didn't work:-

@media only screen and (min-width: 767px) {
.header-item--split-left .site-navigation:first-child > .site-nav__item:first-child .grid__item{column-count: 4; width: 40%;}
}

I'm looking for four columns for my Brands menu. I've not published the new theme yet - may it be possible to send you a collaborator account?

Huge thanks,

Mark

 

Jasoliya
Shopify Expert
4820 625 1224

No need account access, send me your store url and password if any. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Mark118
Excursionist
55 0 4

Thank you for getting back to me Jasoliya.

The store URL is www.frontiers-woman.com, however I'm still running the old Venture theme. The new theme I'm working with is Impulse and the menu I would like to change to 4 columns is the Brands - see below:-

Mark118_0-1615449485980.png

 

If you need account access just let me know. 

Thanks again,

Mark

  

Jasoliya
Shopify Expert
4820 625 1224

Then send me preview url on which theme you want me to check.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Mark118
Excursionist
55 0 4
Jasoliya
Shopify Expert
4820 625 1224

you can add this css in theme.css file

.site-header .site-navigation > li:nth-child(3) ul{ column-count: 3;}

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Mark118
Excursionist
55 0 4

Hi Jasoliya

Thanks, but it didn't seem to work. I added the code at the very bottom of the theme.css.liquid - see below - but no change.

Capture1.JPG

Preview: https://n4sv6p65jykp96zz-28304424.shopifypreview.com

Have I put it in the wrong place?

Many thanks

 

Jasoliya
Shopify Expert
4820 625 1224

My be overriding...try to add in 

Layout->theme.liquid file before </body>

<style>
.site-header .site-navigation > li:nth-child(3) ul{ column-count: 3;}
</style>
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Mark118
Excursionist
55 0 4

Worked perfectly - thank you very much! 

emiladson
Visitor
2 0 0

I've tried several of the solutions but it doesn't work for me either. I'm using the debut theme.

The URL is https://frisorenogbaronen.dk/ and I would like to make it so all columns with more than 15 collections would make a new column.

Do you know how to do that? The file you keep referring to, theme.scss, is called theme.scss.liquid in my theme. Don't know if that makes a difference

Jasoliya
Shopify Expert
4820 625 1224

We can only do static solution form front side so ad this code to fixed "shop" menu column issue.

Add in theme.scss file at bottom:

.site-nav > li:nth-child(2) ul  > li.site-nav__childlist-item:nth-child(2) ul{column-count: 2;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
emiladson
Visitor
2 0 0

Thanks for your help! Much appreciated

kkveeram
Visitor
2 0 0

Hi  

Jasoliya
Shopify Expert
4820 625 1224

Send me page url will check

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Archipel
New Member
8 0 0

Hello @Jasoliya 

Well....I guess it's my turn...
I'd have prefer to fix this by myself, but can't get the result I expected.

I also need 2 columns menu dropdown for my Vendor menu on https://www.archipel.berlin as the list is getting long.
Sorry to bother, and thank you for reading.

Jasoliya
Shopify Expert
4820 625 1224

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss Or theme.css-> paste bellow code in bottom of file

.menuContainer ul.nav > li:nth-child(2) .menuDropdown{ column-count: 2;}

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Archipel
New Member
8 0 0

Thank you so much for your quick answer !
It worked!

Archipel
New Member
8 0 0

Hello again,

I'm facing an other issue : I want to change my menu title color on a specific page.
Here's what I tried : 

 

{%- if section.settings.velamenu_enable -%}
<section id="velaMegamenu" class="velaMegamenu">

{%- if page.handle == 'contact-us-1' or page.handle == 'faq' -%}<nav class="velaMegamenu2">

{%- else -%}


<nav class="menuContainer">

<ul class="nav hidden-xs hidden-sm">

{%- for velaLink in linklists[section.settings.velamenu_linklist].links -%}
{%- assign isMega = false -%}
{%- for block in section.blocks -%}
{%- assign menuItem = velaLink.title -%}
{%- if block.settings.velamenu_item contains menuItem -%}
{% include 'vela-megamenu' %}
{% assign isMega = true %}
{% break %}
{%- endif -%}
{%- endfor -%}
{%- if isMega == false -%}
{%- if velaLink.links != blank -%}

{% comment %}====== MENU DROPDOWN LEVEL I ======{% endcomment %}
<li class="hasMenuDropdown{% if velaLink.active %} active{% endif %}">
<a href="{{ velaLink.url }}" title="{{ velaLink.title }}">
<span>{{ velaLink.title }}</span>
</a>
<ul class="menuDropdown">
{%- for velaLink1 in velaLink.links -%}
{%- if velaLink1.links != blank -%}
{% comment %}====== MENU DROPDOWN LEVEL II ======{% endcomment %}
<li class="hasMenuDropdown{% if velaLink1.active %} active{% endif %}">
<a href="{{ velaLink1.url }}" title=""><span>{{ velaLink1.title }}</span></a>
<ul class="menuDropdown">
{%- for velaLink2 in velaLink1.links -%}
{%- if velaLink2.links != blank -%}
{% comment %}====== MENU DROPDOWN LEVEL III ======{% endcomment %}
<li class="hasMenuDropdown{% if velaLink2.active %} active{% endif %}">
<a href="{{ velaLink2.url }}" title=""><span>{{ velaLink2.title }}</span></a>
<ul class="menuDropdown">
{%- for velaLink3 in velaLink2.links -%}
<li class="{% if velaLink3.active %}active{% endif %}">
<a href="{{ velaLink3.url }}" title=""><span>{{ velaLink3.title }}</span></a>
</li>
{%- endfor -%}
</ul>
</li>
{%- else -%}
<li class="{% if velaLink2.active %}active{% endif %}">
<a href="{{ velaLink2.url }}" title=""><span>{{ velaLink2.title }}</span></a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</li>
{%- else -%}
<li class="{% if velaLink1.active %}active{% endif %}">
<a href="{{ velaLink1.url }}" title=""><span>{{ velaLink1.title }}</span></a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</li>

{%- else -%}
<li class="{% if velaLink.active %}active{% endif %}">
<a href="{{ velaLink.url }}" title="">
<span>{{ velaLink.title }}</span>
{%- if settings[labelItem] != blank -%}
<span class="{%- if settings[selectItem] == 'yes' -%}textNew{%- else -%}textHot{%- endif -%}"> {{ settings[labelItem] }}</span>
{%- endif -%}
</a>
</li>
{%- endif -%}
{%- endif -%}
{%- endfor -%}



</ul>
</nav>



</nav>
{%- endif -%}
</section>

{%- endif -%}

 

 In the vela-header-menu.liquid snippets
and :

 

.velaMegamenu2{
      .menuContainer {
        position: relative;
      min-widh: 600px !important;
width: auto;
    }
.nav{
    >li{
       > a {
color: #000000;
               
       }               				


}
}
}

 

in the 

vela-site.scss.liquid

I can't figure where to insert that code ( {%-if ), once it works on the pages I wanna change but messes with all the other pages, once the menu completely disapears...

I'd like to understand what I'm doing wrong here, as it worked out for the header logo before..

Could you help me with this ?

Thank you for reading.

kkveeram
Visitor
2 0 0

sorry for late reply.

 

the url is  https://kkveeram.myshopify.com/

 

 

regards,

Kiran

Jasoliya
Shopify Expert
4820 625 1224

Send me store password

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Jasoliya
Shopify Expert
4820 625 1224

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss Or theme.css-> paste bellow code in bottom of file

.multi-level-nav ul > li.contains-children > ul.nav-rows{column-count: 2;}

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
itguyksmith
Shopify Partner
2 0 0
Thank you for the prompt response.

I do not have a theme.css or theme.sccs in Assets.
HayleySinton
Visitor
3 0 0

Hi @Jasoliya ,

Is the multi-column option available on the Galleria theme please? 

 

Many thanks

Hayley

Jasoliya
Shopify Expert
4820 625 1224

Send me store url and menu name will give you css.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
HayleySinton
Visitor
3 0 0

Aw thank you! 

tusktools-au password Zyber

Main menu - hopefully want to have 3 columns under Cutting , grinding , drilling 

 

Many thanks

Hayley 

Jasoliya
Shopify Expert
4820 625 1224

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss Or theme.css-> paste bellow code in bottom of file

.navbar-nav.navbar-standard > li:nth-child(3) > ul,.navbar-nav.navbar-standard > li:nth-child(4) > ul,.navbar-nav.navbar-standard > li:nth-child(5) > ul{column-count: 3;}

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
c_jackson04
Tourist
10 0 4

Hello @Jasoliya

How would you add a multi-column dropdown for Shop on https://ri3qvpcf1y067i4l-51982074037.shopifypreview.com for the 'Albums' > 'Boy Groups' and 'Girl Groups' menu?

 

Thank you in advance for any possible help!!

Jasoliya
Shopify Expert
4820 625 1224

add this css:

.nav .dropdown-submenu:nth-child(2) .dropdown-menu,.nav .dropdown-submenu:nth-child(3) .dropdown-menu{column-count: 2;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
c_jackson04
Tourist
10 0 4

Thanks for quick response, I added it to the file theme.css but it hasn't changed. Did I add it in the wrong place?

Jasoliya
Shopify Expert
4820 625 1224

Follow this

1. open Layout -> theme.liquid file- > at end just before </body> paste this

<style>
.nav .dropdown-submenu:nth-child(2) .dropdown-menu,.nav .dropdown-submenu:nth-child(3) .dropdown-menu{column-count: 2;}
</style>

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here