Mega Menu Subcategories and condense options

Mega Menu Subcategories and condense options

Deyo007
Tourist
5 0 1

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?

 

Screen Shot 2025-01-24 at 10.46.27 AM.png

Replies 8 (8)

CodingFifty
Shopify Partner
613 97 116

Hi @Deyo007,

 

Please share the website URL.

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Deyo007
Tourist
5 0 1

I do not have the Shopify site live as of yet. I will be migrating info in a couple of weeks.

 

CodingFifty
Shopify Partner
613 97 116

Please share the preview link.

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Deyo007
Tourist
5 0 1

mt686
Shopify Partner
100 11 21

 

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:


Steps to Fix the Spacing

  1. 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.

  2. 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 */
    }
}

 



  1. Add This to Your Store:
    • Go to Online Store > Themes > Customize in your Shopify admin.
    • Look for a Custom CSS or Additional CSS section in the theme settings.
    • Paste the code there and save.

Want an Easier Way?

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!

Deyo007
Tourist
5 0 1

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!

amccusker
Visitor
1 0 0

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!

Deyo007
Tourist
5 0 1

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"