Re: Changing Mega Menu Font Size in Studio Theme

Solved

Changing Mega Menu Font Size in Studio Theme

lilackitten
Tourist
7 0 2

Hello! I'm trying to figure out how to change the font size of the mega menu in the Studio theme. I've tried a few different codes but they don't seem to work - I've already changed the font size of the main heading where it says 'Birthday Cards', 'Seasonal Cards' etc, the text I'd like to make bigger are the links underneath where it says 'Cards for Her', 'Cards for Him', 'Auntie', 'Brother', etc:

Capture.PNG

Thank you!

Accepted Solution (1)
BSS-TekLabs
Shopify Partner
2136 633 735

This is an accepted solution.

Hi @lilackitten,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

.mega-menu__list li a {
    /* You can adjust this value to change the size of the heading like "Cards for Her,..." */
    font-size: 20px;
}

.mega-menu__list ul li a {
    /* You can adjust this value to change the size of the links underneath */
    font-size: 18px;
}

Here is the result

BSSTekLabs_0-1722168116012.png

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 5 (5)

BSS-TekLabs
Shopify Partner
2136 633 735

Hi @lilackitten,

Could you kindly provide us with your store URL and, if applicable, the password, so that our team can offer you the necessary support?

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
lilackitten
Tourist
7 0 2

Hi, thank you! It's: https://www.lilackittendesigns.com/

BSS-TekLabs
Shopify Partner
2136 633 735

This is an accepted solution.

Hi @lilackitten,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

.mega-menu__list li a {
    /* You can adjust this value to change the size of the heading like "Cards for Her,..." */
    font-size: 20px;
}

.mega-menu__list ul li a {
    /* You can adjust this value to change the size of the links underneath */
    font-size: 18px;
}

Here is the result

BSSTekLabs_0-1722168116012.png

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
lilackitten
Tourist
7 0 2

It's worked, thanks so much! 🙂

BSS-TekLabs
Shopify Partner
2136 633 735

You're welcome! 😊

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now