Shopify themes, liquid, logos, and UX
Hello! I have the "Concept" theme and I am trying to produce two drop down mega menus but I cannot format the look of the results on the main edit page. First Mega Menu dropdown being labeled "Shop by Category" and the other "Shop by Brand"
I have the menu in Shop by Brand broken down in alphabetical sections and the corresponding brand names under that BUT, the alphabetical categories are spaced really far apart and I do not see all the results on one screen. It works great on mobile but I need this to look better on Desktop. How can I accomplish this?
Hi @Deyo007,
Please share the website URL.
I do not have the Shopify site live as of yet. I will be migrating info in a couple of weeks.
Please share the preview link.
If you want to condense the spacing in your "Shop by Brand" mega menu in the Concept theme and make it look better on desktop, here’s how you can do it:
Find the Right Classes: Use your browser's "Inspect" tool (right-click on the menu and select "Inspect") to find the CSS classes for the alphabetical sections (like "A-D") and the brand names.
Add Custom CSS: Add this CSS to your theme to tighten up the spacing and make everything fit better:
/* Reduce space between the alphabetical headers */
.mega-menu .menu-section {
margin-bottom: 8px; /* Less space between sections */
padding-bottom: 5px; /* Adjust the padding */
border-bottom: 1px solid #ddd; /* Optional: Add a subtle line */
}
/* Bring the brand names closer together */
.mega-menu .menu-item {
padding: 3px 0; /* Less space between items */
line-height: 1.3; /* Adjust the line height */
}
/* Make the menu a responsive grid */
.mega-menu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Flexible columns */
gap: 8px; /* Space between columns */
}
/* Optional: Shrink font size on desktop for better fit */
@media screen and (min-width: 768px) {
.mega-menu .menu-item {
font-size: 14px; /* Smaller text */
}
}
If you'd prefer not to mess with code, try using EasyEdits, a Shopify app that lets you tweak your store's design directly in the editor. You can adjust spacing, font sizes, and layouts without needing to know CSS. Plus, you can keep the changes you make during the free trial.
Check out EasyEdits to make these kinds of updates faster and simpler.
Let me know if you get stuck or have any questions!
So I have that pasted in the Custom CSS field but it made no difference. Am I missing something with assigning a CSS class into the script above? Read the steps that were given but not sure what to do with the class I was looking for in the inspector. Thank you for your help!
Were you ever able to find a solution for this? I am trying to achieve the same thing and had the same issue as you!
Yes but it is not perfect yet. I have it more manageable for now and will dive into finer details later. I added the following into my theme.css file at the very bottom of the LONG list of code.
/* Reduce the width of each alphabetical section */
.mega-menu .alphabet-section {
flex: 1 1 5%; /* Adjust width for better alignment */
min-width: 150px; /* Prevents sections from getting too small */
text-align: left;
}
/* Force sections into multiple rows if necessary */
.mega-menu .alphabet-container {
display: flex;
flex-wrap: wrap; /* Allows sections to wrap into rows */
justify-content: space-between;
}
/* Reduce unnecessary spacing */
.mega-menu .alphabet-section a {
display: block;
padding: 5px 10px;
}
/* Adjust Font Size for Desktop */
@media (min-width: 1024px) {
.mega-menu .alphabet-section a {
font-size: 14px;
}
}
That cleaned it up a bit and made it more visible at least for now. Hope this helps! You will likely have to change the name of the CSS class you are using where mine is called ".alphabet-section"
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025