Shopify Design

aamirch · ‎06-01-2019

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

Jasoliya · ‎06-01-2019

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

Jasoliya · ‎07-06-2020

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 · ‎11-10-2020

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 · ‎02-22-2021

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 · ‎02-22-2021

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 · ‎02-22-2021

Thank you worked perfectly.

Arties · ‎03-08-2021

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 · ‎03-09-2021

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 · ‎03-09-2021

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 · ‎03-09-2021

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

Jasoliya · ‎03-09-2021

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 · ‎03-09-2021

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

Jasoliya · ‎03-09-2021

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 · ‎03-09-2021

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

Thanks for trying though!

Jasoliya · ‎03-09-2021

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 · ‎03-10-2021

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 · ‎03-11-2021

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 · ‎03-11-2021

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:-

If you need account access just let me know.

Thanks again,

Mark

Jasoliya · ‎03-11-2021

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 · ‎03-11-2021

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

Jasoliya · ‎03-11-2021

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 · ‎03-11-2021

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.

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

Have I put it in the wrong place?

Many thanks

Jasoliya · ‎03-11-2021

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 · ‎03-11-2021

Worked perfectly - thank you very much!

emiladson · ‎03-15-2021

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 · ‎03-15-2021

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 · ‎03-15-2021

Thanks for your help! Much appreciated

kkveeram · ‎04-15-2021

Hi Jasoliya,

Is it also possible to split collections that are created as sub-menus, using page.list-collections template ,into columns?

Jasoliya · ‎04-17-2021

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 · ‎05-01-2021

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 · ‎05-01-2021

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 · ‎05-02-2021

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

Archipel · ‎05-06-2021

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 · ‎05-18-2021

sorry for late reply.

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

regards,

Kiran

Jasoliya · ‎05-19-2021

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 · ‎06-14-2021

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

Shopify Design

Multi-column drop down menu in Debut theme

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links