I want to reduce the text size and change font of menu items in dawn theme

Store Design
1

I want to reduce text size and change font of the menu bar in the header section for the dawn theme.

2

Hey @Shivani3

Share your Store URL and Password if enabled.

Best Regards,

Moeed

3

Hello @Shivani3 ,

To reduce the text size and change the font of the menu bar in the header section for the Dawn theme, you’ll need to apply CSS properties:

  1. To adjust the text size, you can use the font-size property.
  2. For changing the font, utilize the font-family property, specifying the desired font family.

If you’re not familiar with technical terms, could you kindly share the URL of the store you mentioned earlier? If the store is password protected, providing the password will also be helpful. I’d be happy to assist you further

4

Website - hawbeez.com

Can you share with me the steps to add the code?

5

Hello @Shivani3

Here is the code you can try. It might be helpful for you.

Go to the Online Store-> Theme-> Edit code-> Assets> base.css → Add code at the bottom.

.list-menu__item span {
	font-size: 18px;
	font-family: Caslon Old Face;
}
6

Will the changes be applied to both the mobile and desktop versions?

7

I attempted to use the code but it only applied to desktop, not mobile. How can I apply it to both?

8

IMG_20240304_155703.jpg
IMG_20240304_155703.jpg720×1322 52.1 KB

Can you please help me reduce the size of this menu box for mobile?

9

Hello @Shivani3 ,

Here is the code you can try. It might be helpful for you.

Go to the Online Store-> Theme-> Edit code-> Assets> base.css → Add code at the bottom.

@media screen and (min-width:1245px){
.list-menu__item span {
	font-size: 18px;
	font-family: Caslon Old Face;}}
@media screen and (max-width:1244px){
.list-menu__item span {
	font-size: 15px;
	font-family: Caslon Old Face;
}
}
10

The changes made are only applicable to desktops, not mobile devices.

11

Hello @Shivani3 ,

Here is the code you can try. It might be helpful for you.

Go to the Online Store-> Theme-> Edit code-> Assets> base.css → Add code at the bottom.

@media only screen and (max-width:768px){
.menu-drawer__menu-item {
	font-size: 16px;
}
}
@media only screen and (min-width:990px){
.header__menu-item.list-menu__item.link {
	font-size: 18px;
}
}
12

Hi @Shivani3

This is Theodore from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Theodore | PageFly