Desktop Header Main Menu

  • Published
  • Last Update

These options are located in the Theme Options > Header > Desktop Header tab. Then go to the Desktop Header Main Menu section.

Desktop Header Main Menu options control the styles for the main menu of the desktop header on your site.

The main menu setting of the desktop header is: See Setting Up The Menu

First of all, let’s find out about the terms used in this document.

Main Menu Highlight Style

There are several styles that can be selected to add an indicator when the main menu item is the active link or when it moves over a menu item. Let’s take a look at the following to learn more about each style selection.

Simple Bar: Top (Left in The Sidebar header) – The highlight is displayed in a bar above the menu item. In Desktop header version 4 (Sidebar Header), it is displayed on the left side of the menu item.

Simple Bar: Bottom (Right in The Sidebar header) – The highlight is displayed in a bar below the menu item. In Desktop header version 4 (Sidebar Header), it is displayed on the right side of the menu item.

Animation Underline: Expansion – The highlight is displayed in a underline below the menu item text. When you move the mouse over the other menu item, you can see the animation effect that spreads left to right in this underline.

Animation Underline: Slide Up – The highlight is displayed in a underline below the menu item text. When you move the mouse over the other menu item, you can see the animation effect that sliding up in this underline.

MagicLine: Top (Left in The Sidebar header) – The highlight is displayed in a line above the menu item. When you move the mouse over the other menu item, the line moves to match the width and positioning. In Desktop header version 4 (Sidebar Header), it is displayed on the left side of the menu item.

MagicLine: Bottom (Right in The Sidebar header) – The highlight is displayed in a line below the menu item. When you move the mouse over the other menu item, the line moves to match the width and positioning. In Desktop header version 4 (Sidebar Header), it is displayed on the right side of the menu item.

Background Solid Color –The highlight is displayed by the solid color of the current menu item background.

Background Gradient Colors –The highlight is displayed by the gradient color of the current menu item background.

Main Menu Highlight Style (Fig. 1)

If you select one of the Main Menu Highlight Style (except None), you can set Main Menu Highlight Style options.

Main Menu Highlight Style options Screenshot
Fig. 1. Main Menu Highlight Style options Screenshot.

 

Animation Underline Height – Illustrated as 1. Controls the animation underline height.

Animation Underline Color – Illustrated as 2. Controls the animation underline color.

MagicLine Height (Fig. 2)

You can set MagicLine Height if you select MagicLine: Top (Left in The Sidebar header) or MagicLine: Bottom (Right in The Sidebar header) of Main Menu Highlight Style.

MagicLine Height option Screenshot
Fig. 2. MagicLine Height option Screenshot.

 

MagicLine Height – Illustrated as 3. Controls the magicline height. In the sidebar header, controls the magicline width.

Highlight Item Background Solid Color (Fig. 3)

Highlight Item Background Solid Color options Screenshot
Fig. 3. Highlight Item Background Solid Color options Screenshot.

 

Main Menu Highlight Item Background Color – Illustrated as 4. Controls the menu item background color for the main menu highlight style.

Main Menu Highlight Item Text Color – Illustrated as 5. Controls the menu item text color for the main menu highlight style.

Highlight Item Background Gradient Color (Fig. 4)

Highlight Item Background Gradient Color options Screenshot
Fig. 4. Highlight Item Background Gradient Color options Screenshot.

 

Main Menu Highlight Item Background Gradient Colors – Illustrated as 6. Controls the menu item background gradient colors for the main menu highlight style.

Main Menu Highlight Item Background Gradient Angle – Illustrated as 7. Controls the menu item background gradient angle for the main menu highlight style. Degree(deg) unit.

Main Menu Dropdown

Main Menu Dropdown is a menu list that appears when you hover over the top-level item in the main menu. (Fig. 5)

Main Menu Dropdown Width On The 1 Column(Default) Sub-Menus.
Fig. 5. Main Menu Dropdown Width On The 1 Column(Default) Sub-Menus Screenshot.

Main Menu Dropdown Width On The 1 Column(Default) Sub-Menus Style

Sonnet offers a column of 4 customizable Dropdown to suit your site’s needs. See Menu Settings

Here, “Dropdown Multi-Column Sub-Menus” option in the top-level entry of the main menu means “Dropdown Width” when selected as “1 Column (Default)”. (Fig. 6)

Appearance > Menus: Dropdown Multi-Column Sub-menus Screenshot.
Fig. 6. Appearance > Menus: Dropdown Multi-Column Sub-menus option Screenshot.

Main Menu Dropdown Divider

Main Menu Dropdown Divider is divider line on dropdown menu items. (Fig. 7)

Main Menu Divider.
Fig. 7. Main Menu Divider.

Dropdown Multi-Column Sub-Menus Column Divider

Sonnet offers a column of 4 customizable Dropdown to suit your site’s needs. See Menu Settings

“Dropdown Multi-Column Sub-Menus” in the top-level item of the main menu on the Appearance > Menus page means a divider between columns when selected as “2 columns” or “3 columns” or “Full Width (4 columns)”. (Fig. 6) (Fig. 8)

Dropdown Multi-Column Sub-Menus Column Divider.
Fig. 8. Dropdown Multi-Column Sub-Menus Column Divider.

Dropdown Menu With Arrow

The “Dropdown Menu With Arrow” option is at Theme Options > Header > Desktop Header > Desktop Header Main Menu > #Desktop Header Main Menu Dropdown only Desktop header version 1, Desktop header version 2 and Desktop header version 4. (Fig. 9)

Dropdown Menu With Arrow
Fig. 9. Dropdown Menu With Arrow.

Sonnet offers a range of 4 customizable header layout versions (Fig. 10) to suit your site’s needs, and the Desktop Header Background options are suggested that must be controlled for that desktop header when setting the version of the desktop header set in the Desktop Header Layout.

4 customizable header layout versions.
Fig. 10. 4 customizable header layout versions.

Desktop header version 1

If you select the Desktop Header Layout option as Desktop header version 1, the Desktop Header Main Menu options you need to control are (Fig. 11):

Screenshot of Desktop Header Main Menu options in the Desktop header version 1
Fig. 11. Screenshot of Desktop Header Main Menu options in the Desktop header version 1.

 

Desktop Header Main Menu Item Alignment – Illustrated as A. Controls the Main Menu Item Alignment for the Desktop header version 1.

Desktop Header Main Menu Item – Illustrated as B. Controls the Main Menu Item for the Desktop header version 1.

Desktop Header Main Menu Dropdown – Illustrated as C. Controls the dropdown of Main Menu Item for the Desktop header version 1.

Desktop header version 2

If you select the Desktop Header Layout option as Desktop header version 2, the Desktop Header Main Menu options you need to control are (Fig. 12):

Screenshot of Desktop Header Main Menu options in the Desktop header version 2
Fig. 12. Screenshot of Desktop Header Main Menu options in the Desktop header version 2.

 

Desktop Header Main Menu Item Alignment – Illustrated as D. Controls the Main Menu Item Alignment for the Desktop header version 2.

Desktop Header Main Menu Item – Illustrated as E. Controls the Main Menu Item for the Desktop header version 2.

Desktop Header Main Menu Dropdown – Illustrated as F. Controls the dropdown of Main Menu Item for the Desktop header version 2.

Desktop header version 3

If you select the Desktop Header Layout option as Desktop header version 3, the Desktop Header Main Menu options you need to control are (Fig. 13):

Screenshot of Desktop Header Main Menu options in the Desktop header version 3
Fig. 13. Screenshot of Desktop Header Main Menu options in the Desktop header version 3.

 

Desktop Header Main Menu Item Alignment – Illustrated as G. Controls the Main Menu Item Alignment for the Desktop header version 3.

Main Menu Toggle Icon Container Height – Illustrated as H. Controls the main menu toggle icon item container height. (Fig. 14)

Main Menu Toggle Icon Container Height
Fig. 14. Main Menu Toggle Icon Container Height.

 

Desktop Header Main Menu Dropdown – Illustrated as I. Controls the Main Menu Item for the Desktop header version 3.

 

Desktop header version 4 (Sidebar Header)

If you select the Desktop Header Layout option as Desktop header version 4 (Sidebar Header), the Desktop Header Main Menu options you need to control are (Fig. 17):

Screenshot of Desktop Header Main Menu options in the Desktop header version 4 (Sidebar Header)
Fig. 17. Screenshot of Desktop Header Main Menu options in the Desktop header version 4 (Sidebar Header).

 

Desktop Header Main Menu Item – Illustrated as L. Controls the Main Menu Item for the Sidebar Header.

Desktop Header Main Menu Dropdown – Illustrated as M. Controls the dropdown of Main Menu Item for the Sidebar Header.