How to change mobile menu, sub categories font size

[lee1428]

Hi Guys,

I struggling to change the nested sub menu font size for the mobile.

My menu opens with the options of necklaces (which i have managed to change the font size to 12) but the sub menus under necklaces are still at font 14! 

Can anyone help to how i can change this on the ENVY THEME.

Thank you

[suyash1]

@lee1428 Can you please share this page link?

[lee1428]

Hello Suyash1,

My Link is wv23ie-sa.myshopify.com

As you can see the on the mobile version, the sun categories are larger text which i want smaller. 

Also, if you're able to help with the scrolling header padding.. I would like to reduce that also.

Many Thanks

[suyash1]

@namphan please add this css to the very end of your css file and check,

.mobile-nav__sublist .mobile-nav__link {font-size: 12px;}

[Made4uo-Ribe]

Hi @lee1428 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[lee1428]

Hello Made4uo-Ribe,

My Link is wv23ie-sa.myshopify.com

As you can see the on the mobile version, the sun categories are larger text which i want smaller. 

Also, if you're able to help with the scrolling header padding.. I would like to reduce that also.

Many Thanks

[Made4uo-Ribe]

Thanks for the info, do youe mean the menu sub categories right? 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.mobile-nav__sublist .mobile-nav__link {
        font-size: 12px !important;
}

• And Save.
• Result:
• 
• Can You point me out this one?

  Which one your refering to? Thanks!

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[namphan]

Hi @lee1428,

Please send the website link, I will check it for you

[lee1428]

Hello Namphan,

My Link is wv23ie-sa.myshopify.com

As you can see the on the mobile version, the sun categories are larger text which i want smaller. 

Also, if you're able to help with the scrolling header padding.. I would like to reduce that also.

Many Thanks

[namphan · Accepted solution]

Hi @lee1428,

Please go to Actions > Edit code > Assets > component-mobile-menu.min.css file and paste this at the bottom of the file:

.mobile-nav__sublist .mobile-nav__link {
    font-size: 12px !important;
}

[lee1428]

Hi Namphan,

This worked!! Thank you so much 😁

Would you be able to help me with two other issues i have please?

1. On the mobile version, the scrolling header width is quite big, can this be reduced to just over half of the width its currently at?

2. On the mobile version, the first 4 categories that come up with images are personalised, necklaces, bracelets and rings. Is there any coding so that the images sit in a grid of four pictures instead (with some padding in between the images)?

Many thanks for all your help 

[namphan]

Hi @lee1428,

1: I checked and your logo has too much spacing on top and bottom, please remove it, everything will work fine.

2: You want 2 images to display on 1 row?

[lee1428]

Hi Namphan, 

I've had a change around and readjusted the logo to my liking... Many thanks.

Yes please, I would like 2 images to display on 1 row on the mobile version please.

Thank you

[namphan]

Hi @lee1428,

Please go to Customize > Theme settings > Custom CSS and add code:

@media screen and (max-width: 767px) {
.collage-builder__grid-container {
    margin: -8px;
}
.collage-builder__grid-item {
        width: calc(100% /(2)) !important;
        padding-bottom: 50% !important;
        margin-bottom: 0 !important;
}
.collage-builder__grid-item--inner {
    padding: 8px;
}
.collage-builder__media-wrapper .collage-builder__text-container {
    padding: 10px !important;
}
.collage-builder__button-container .collage-builder__button {
    padding: 10px 15px;
}
}