Avoori firmly believes in giving out solutions, such as professional customization for every kind of possible use case. You get full control to edit the smallest design aspects of your website. In that endeavor, we have included the configurations for editing Typography for the Main Menu dropdown.
Let’s understand how to use it to edit the dropdown typography for the main menu.
Navigate to your website admin, browse to Appearance > Customize > Typography> Main Menu Dropdowns.
Set the Font for the Dropdown of Main Menu
Generally speaking, you shouldn’t be using a different font under the dropdown. In most cases, it would make sense to be using the same fonts as of the main menu. Besides, you should avoid using more than 3 fonts on your site at any cost.
You should only change the fonts if it actually serves a purpose. Otherwise, overloading your website with fonts will only make the site resource heavy.
If you want to use a custom font, you can choose one from the dozens of standard and Google fonts. You will definitely find one that looks perfect for your dropdown. Just click over the drop-down menu underneath the “Font Family” in Main Menu: Dropdowns panel and choose your desired font.
Set the Font Weights for the Dropdown of Main Menu
Font weight will either make your dropdown 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 Main Menu: Dropdowns panel and choose your desired font weight.
Set the Font Styles for the Dropdown of Main Menu
You can either make your dropdown 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 Main Menu: Dropdowns panel and choose your desired setting.
Transforming Text for Dropdown of Main Menu
You can choose any of these four options. In case of a dropdown, some of these options may only look good in some fonts. For example, a dropdown in Capitalize text using Arial font will definitely not look good. So use your best judgment and live preview to see what works best for your dropdowns.
- 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 Main Menu: Dropdowns panel and select a suitable setting.
Changing the Dropdown Font Size in Pixels for the Main Menu
You can easily use the slider under the “Font Size (px)” label inside the Main Menu: Dropdowns panel to increase or decrease the logo text size. You will also be able to preview the logo live to make your best judgment for what best suits your design and purpose.
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.
Set a Line Height for your Dropdown of Main Menu
The dropdown line height is the vertical space between two dropdown items.
You can use the slider under the “Line Height” label in Main Menu: Dropdowns panel to make the changes.
You can choose to keep different (dropdown) font size 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. So you can click over each icon and adjust the slider as per your needs to save your preferences.
Set the Letter Spacing for your Dropdown of Main Menu
With letter spacing feature for your dropdown, you can increase or decrease the space in between dropdown text letters.
You can easily use the slider under the “Letter Spacing (px)” label in Main Menu: dropdowns 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 Line Height feature above.