Re: Dawn theme mega menu text size

Solved

How can I adjust the text size in Dawn theme's mega menu dropdowns?

emilyaugstudios
Pathfinder
122 1 58

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

Screenshot 2024-04-09 at 18.17.41.png

Accepted Solution (1)

sahilsharma9515
Shopify Partner
1266 165 244

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

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


View solution in original post

Replies 2 (2)

swym
Trailblazer
172 36 77

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: 

swym_0-1712741388259.png

 

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:

swym_1-1712741558179.png

 

4. Please see the screenshots below for reference, which highlight the components mentioned in the CSS code: 

 

swym_4-1712741664034.png

 

swym_3-1712741613409.png

 

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

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries

sahilsharma9515
Shopify Partner
1266 165 244

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

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️