Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
Hi @DAMV maybe this can help you https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links/drop-down-menus
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
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
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.
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.
Thanks so much @Jasoliya . It worked perfect 🙂 Do you know how I can make it work for the mobile version?
Thanks a lot really!!
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;}
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
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?
CHeers,
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; }
Thank you worked perfectly.
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.
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;}
}
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)
tried it in style-desktop and style-rtl-desktop as well
You can add in any working css file, may be in "custom.scss.css" at bottom of file
Tried in a number of scss files, didn't want to work.
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>
There were 2 separate <body></body> tags in that file, would not work in either.
Thanks for trying though!
I can see you have not added code. add me staff, i sent you access request check.
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
No need account access, send me your store url and password if any.
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
Then send me preview url on which theme you want me to check.
you can add this css in theme.css file
.site-header .site-navigation > li:nth-child(3) ul{ column-count: 3;}
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
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>
Worked perfectly - thank you very much!
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
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;}
Thanks for your help! Much appreciated
Hi Jasoliya,
Is it also possible to split collections that are created as sub-menus, using page.list-collections template ,into columns?
Send me page url will check
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.
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;}
Thank you so much for your quick answer !
It worked!
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.
Send me store password
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;}
Send me store url and menu name will give you css.
Aw thank you!
tusktools-au password Zyber
Main menu - hopefully want to have 3 columns under Cutting , grinding , drilling
Many thanks
Hayley
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;}
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!!
add this css:
.nav .dropdown-submenu:nth-child(2) .dropdown-menu,.nav .dropdown-submenu:nth-child(3) .dropdown-menu{column-count: 2;}
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?
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>
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024