General Settings – Main & Second Menus

Introduction

The Menu Settings options panel of either the Main Menu or Second Menu is where you can alter a number of settings that affect aspects of your themes menus.

This tutorial looks specifically at the options available in the Main Menu Settings > Main Menu General Settings area:

Note: In this tutorial we look specifically at the Main Menu General Settings options area, however the procedures discussed are identical if working with the Second Menu General Settings options area. In other words, substitute “Second” for “Main” in any procedure below and the same steps apply perfectly to working with the Second Menu block.

The options available are summarized below:

Layout. Set a left or right aligned menu and specify space either side of the menu (horizontal offset).
Text. Choose a main menu font.
CSS3 Design Effects. Apply dropdown menu shadow effect and CSS3 curved corner effects.

Layout

To align your menu:

1. Click the Left or Right radio-button to align your menu to the left or right side of your site.

2. Type a Horizontal Offset value (in pixels) to create space between the left and right side of your menu block and your menu items.

Note: Horizontal offset applies pixel spacing to the left and right side of the area in which your menu items are contained. An example use of this function is if you are using curved corners you can use horizontal offset to space your menu items slightly away from the corners for better balance and seamless hover effects (that don’t cross or overlay the curved corners).

3. Click to apply the change in the ThemeStarta preview.

4. Click to apply your changes to your live WordPress theme.

Text

The font name in the Main menu font field is your current menu font. To change it:

1. In the Main menu font field, click the button. The font selection window is displayed:

Remember: This window displays all the default fonts and any additional fonts that you have made available for use in your theme. There are many more fonts available to you that are not displayed here. ThemeStarta gives you access to the entire Google Web Font directory containing hundreds of free fonts for you to use. Once you have added a Google Font to your ThemeStarta font list, it will display in the above font selection window. At the time of writing this guide, there were 436 Google Fonts available to use with ThemeStarta. Google continue to expand their font directory all the time. In other words, you have hundreds upon hundreds of cool fonts to choose from. In the above image, “Open Sans” and “Paytone One” are two additional Google Fonts that have been added for example. Learn how to add new Google Fonts here.

2. Select the font you want from the font selection window. The window will close and your font selection will be displayed in the Main menu font field.

3. Click to apply the change in the ThemeStarta preview.

4. Click to apply your changes to your live WordPress theme.

CSS3 Design Effects

The Main Menu Settings > Main Menu General Settings > CSS3 Design Effects options panel provides two functions:

To Enable Drop Down Menu Shadows. Although included in the CSS3 Design Effects option panel, this particular option is not actually dependent on CSS3 being enabled in your theme and so you will not at any time see this particular option greyed out.
To Enable CSS3 Curved Corners. This options panel remains inactive (greyed out) until such time as you Enable CSS3 Styling Options in the ThemeStarta Options – Click to Access panel.

Both of these design effects are disabled by default.

To Enable Drop Down Menu Shadows:

1. In the Enable Drop Down Menu Shadow field, click the Enable radio-button. Click Disable to turn the dropdown menu shadow off.

Note 1: It is recommended to leave this function disabled if using curved corners in your menus. Dropdown shadows are performed with the use of a shadow image which will conflict to a small degree with curved corners, creating an unsightly effect.

Note 2: The shadow is an automated function only, and as such there are no other settings to help you customize the shadow. You can, however, replace the image used for the shadow with an image of your own.

2. Click to apply the change in the ThemeStarta preview.

3. Click to apply your changes to your live WordPress theme.

To Enable CSS3 Curved Corners:

Remember: You must you Enable CSS3 Styling Options in the ThemeStarta Options – Click to Access panel before you can enable curved corners.

1. In the Enable CSS3 Curved Corners field, click the Enable radio-button. Click Disable to turn the dropdown menu shadow off.

Note: Once enabled you can control the curve corner design effect from:

within the Main Menu Settings > Main Menu Drop Down Items > CSS3 Design Effects options panel for dropdown menu items

within the Main Menu Settings > Main Menu Fly Out Items > CSS3 Design Effects options panel for flyout menu items