Customizing the Header Menu

The first option we want to change is the actual Font Family used for the Header Menu. To do this go to Theme Options -> Typography -> Google Fonts Options -> Select Header Menu Font Family.

Still on this section scroll further down, until the Font Sizes section appears. Change the Header Menu Font Size (px) to the needed value. Default value is 13px.

To customize the colors, font sizes and font weight of the Main Menu navigate to Theme Options -> Menu Options -> Menu Style – First Level.

The options listed here will affect the Main Menu Items. Here are some of the available settings:

• Menu Force Uppercase – enable this option to force the Main Menu items use uppercase letters
• Menu Line Height – specificy here the line height used for the Main Menu items. Use either pixels or integer values.
• Menu Font Weight – set the font weight of the Main Menu items.
• Menu Text Color – set the color or the Main Menu Items
• Menu Text Color on Hover – set the color of the Main Menu items on mouse hover
• Menu Background Color Hover – set a background color for the Main Menu items on mouse hover
• Menu Item Hover Effect – choose to show a small animated border below the menu items text, on hover.
• Menu Item Hover Effect Color – Select the color of the small animated border below the menu items text, on hover

Customize the Sub-Menu items

Now that the Main Menu items have been customized we can start customizing the sub-menu items as well.

Expand the Menu Style – Sublevels + Megamenu section and use the following opstions to customize the Sub-Menu items – these settings also apply for MegaMenus

• Sub-Menu Force Uppercase – similar to the option above, this option will also force the sub-menu items to use uppercase letters.
• Sub-Menu Icon Indicator – if this option is enabled, a small icon will appear next to menu items that have sub-menu items
• Sub-Menu Font Weight – set the font weight of sub-menu items
• Menu Text Color – Sublevels – set the color of the sub-menu items
• Menu Text Color Hover – Sublevels – set the color of hover of the sub-menu items
• Menu Background Color – Sublevels – set the background color of the sub-menu items
• Menu Background Color Hover – Sublevels – set the background color on hover of the sub-menu items
• Menu Separator Color (Lines) – set the color of the separator, between each sub-menu item

How to set the Width of the Dropdown Menu

Under Theme Options -> Menu Options -> Dropdown Menu we can use the slider to specify the actual width in pixels of the dropdown menu. 200px is a good starting point.