Making menu/header text bigger

Store Design
, , , , ,
1

Hello,

can someone write me a code, so the text in menu/footer will be just a little bit bigger? I couldnt find it anywhere in theme settings, and there is already some code involved, so i dont want to mess it up. The font and spacing remain the same.
Thank you
https://www.pickupstore.cz/

header.png
header.png1894Ă—148 52.8 KB

1 Like
2

Hi @radaApeta

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:
/* header menu */
.list-menu.list-menu--inline span {
    font-size: 20px;
}

/* fotter menu */
.footer-menu-link-sections--21794337358158__ss_footer_6_F8ayzU {
    font-size: 15px;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Hey @radaApeta ,

To slightly increase the text size in the menu and footer without affecting the font or spacing, you can add a custom CSS rule targeting only the font size for the menu and footer areas. Place the following CSS code in your theme’s custom CSS section or in a stylesheet file. This code will increase the font size by a small amount, maintaining other styles and spacing.

/* Increase font size in the menu */
.list-menu__item span,
.footer__menu-item span {
    font-size: 1.1em; /* Adjust this value as needed */
}

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

4

Hello, thank you, but the code didnt work for the text that is revealing under the heading. To be exact in only worked for text withnout revealing another text. @Made4uo-Ribe

radaApeta_0-1730116304132.png
radaApeta_0-1730116304132.png630Ă—240 12 KB

radaApeta_1-1730116592960.png
radaApeta_1-1730116592960.png227Ă—297 7.98 KB

5

Add this one,

.header__submenu.list-menu.motion-reduce a {
    font-size: 16px !important;
}

And Save.

Result:

Made4uoRibe_0-1730116893872.png
Made4uoRibe_0-1730116893872.png526Ă—782 207 KB

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like