By default, you will see your main menu also shown on the mobile menu (basically the same menu that you see on the desktop).
If you want to have a different menu for mobiles, that’s where the mobile menu comes in to play. You can explore the adding and editing menu items guide to learn how to create a custom menu and allocate it to become the Mobile Menu.
Let’s get started to learn more about the available configurations. Navigate to your website admin, browse to Appearance > Customize > Typography> Mobile Menu.
Set the Font for the Mobile Menu
If you want to use a custom font for the mobile menu, you can choose one from the dozens of standard and Google fonts. You will definitely find one that looks perfect for your mobile menu. Just click over the drop-down menu underneath the “Font Family” in Mobile Menu panel and choose your desired font.
Set the Font Weights for the Mobile Menu
Font weight will either make your mobile menu text to look bold or thin. Not every font supports all the font weights but does support a few mostly.
Technically speaking, font weight is an HTML property that accepts numbers, usually from 100 to 900 with an increment of 100 in between each, 100 being thinnest and 900 being the boldest.
These are the options you get to set the font weight.
Just click over the drop-down menu underneath “Font Weight” label in Mobile Menu panel and choose your desired font weight.
Set the Font Styles for the Mobile Menu
You can either make your mobile menu text to follow a normal or an italic style. To do so, just click over the drop-down right beneath the “Font Style” label in Mobile Menu panel and choose your desired setting.
Transforming Text for Mobile Menu
You can choose any of these four options. In case of a mobile menu, some of these options may only look good in some fonts. For example, a dropdown in Capitalize text using Arial font will probably not look good as other possible configurations. So use your best judgment and live preview to see what works best for your mobile menu.
- It capitalizes the first letter of each word.
- It converts all the letters to lowercase
- It converts all the letters to uppercase
- It doesn’t do anything, keeps your text as it is just the way you have written it.
Just browse the drop-down underneath “Text Transform” label in Mobile Menu panel and select a suitable setting.
Changing the Font Size in Pixels for the Mobile Menu
You can easily use the slider under the “Font Size (px)” label inside the Mobile Menu panel to increase or decrease the text size.
You can choose to keep different font sizes for the desktop, tablet, and mobile. Simply click over the small gray color icon next to the label; it will expand it into three icons. First one is for the desktop font size, second for the tablet font size, and third for the mobile font size.
You maybe are wondering if it’s a mobile menu then when are you getting icon options for the desktop and tablet under the mobile menu font configuration. That’s because if you resize the window on your desktop, you will be able to see the mobile menu. So you can even configure settings for such a use case.
Set a Line Height for your Mobile Menu
The Mobile Menu line height is the vertical space between two mobile menu items.
You can use the slider under the “Line Height” label in Mobile Menu panel to make the changes.
You can choose to keep different line height for the desktop, tablet, and mobile just the way you have set under the “Font Size (px)” configuration above.
Set the Letter Spacing for your Mobile Menu
With letter spacing feature for your Mobile Menu, you can increase or decrease the space in between text items of the mobile menu.
You can easily use the slider under the “Letter Spacing (px)” label in Mobile Menu panel to make changes to the letter spacing. You also get to choose different letter spacing for the desktop, tablet, and mobile as discussed under Font Size feature above.