Multi-column drop down menu in Debut theme

Solved
aamirch
New Member
11 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
4748 617 1197

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 192 (192)
Jasoliya
Shopify Expert
4748 617 1197

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
4748 617 1197

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
4748 617 1197

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
4748 617 1197

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
4748 617 1197

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
4748 617 1197

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
4748 617 1197

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

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
4748 617 1197

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

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Mark118
Excursionist
55 0 4
Jasoliya
Shopify Expert
4748 617 1197

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
4748 617 1197

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
4748 617 1197

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
4748 617 1197

Send me page url will check

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
4748 617 1197

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
4748 617 1197

Send me store password

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Jasoliya
Shopify Expert
4748 617 1197

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here