All things Shopify and commerce
Hi...
Does anyone know how to change the text size in the mega menu dropdowns on the Dawn theme? I have already changed the text size of the parent menu items but I'd love to also change the size on the child & grandchild menu items. Images attached.
Thanks in advance!
URL - https://8lemonpips.com/
Current Password - eyacau
Solved! Go to the solution
This is an accepted solution.
Hi @emilyaugstudios Thanks for the URL. Please add this code where you should have added your previous custom CSS code( I think it's base.css).
.mega-menu__link {
font-size: 10px !important; //change it according to your needs.
}
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
Hello Emilyaugstudios,
It's good practice to create a copy of your theme and work on that to preview the changes before applying, especially if you are editing the raw code. Alternatively, you can also use the Shopify theme editor’s versions to revert to previous versions, but it is not recommended if you are making multiple changes.
Now to answer your specific question on how you can change the mega menu text size, please follow the below steps:
1. Open the code editor, as shown in the screenshot below:
2. Create a snippet called ‘custom-menu-styles’ and add the below code:
<style>
/* You can change the font sizes using the below CSS as per your requirements */
/* Mega Menu Links */
.mega-menu__list .mega-menu__link.link {
font-size: 12px;
}
/* Condensed Menu links */
.mega-menu__list.mega-menu__list--condensed .mega-menu__link.mega-menu__link--level-2.link {
font-size: 12px;
}
/* Mega Menu Title */
.mega-menu__list .mega-menu__link--level-2.link{
font-size: 14px;
}
</style>
3. Include the ‘custom-menu-styles.liquid’ file in your “theme.liquid” file.
Add the following include code to your theme.liquid file.
{% render 'custom-menu-styles' %}
It would look something like below:
4. Please see the screenshots below for reference, which highlight the components mentioned in the CSS code:
5. Done? Now save the file, and try previewing to confirm if the changes work for you.
I hope this helps!
Regards,
Abhishek from Swym
This is an accepted solution.
Hi @emilyaugstudios Thanks for the URL. Please add this code where you should have added your previous custom CSS code( I think it's base.css).
.mega-menu__link {
font-size: 10px !important; //change it according to your needs.
}
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
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