Header Primary Menu

The header builder ( found in  Appearance > Customize > Header ) has three rows in which you can easily select and arrange the available components you can find while hovering over each division of the rows. 

Add Header Primary Menu

Just click on the ➕ symbol and a  list of components will appear. 

From there you can add the  Primary Menu component.

To open the  customizing options, just click on ⚙️ of the newly added Primary Menu, located in the body of the component. This will open the Primary Menu panel on the left side, from where you can customize the component

⚙️ General

• Appearance > Customize > Header > Primary Menu > General

 Create your Primary Menu

In the General tab, click on Primary Menu. You will be directed to the Menus location in Customizer, where you can create / edit a new menu and assign it as Primary Menu.

 General options for the Primary Menu

Expand the first level of the dropdowns when the menu is in the mobile menu content - enable / disable.

 📐Layout

• Appearance > Customize > Header > Primary Menu > Layout

 Custom spacing and height 

In the Layout tab, there are controls for:

• Items Spacing: Space (in pixels) between menu items.
  • along with a reset button ( Desktop | Tablet | Mobile )
• Items Height: Top / Bottom space (in pixels) for menu items.
  • along with a reset button ( Desktop | Tablet | Mobile )

 Custom padding and margin

In the Layout tab, you also have access to advanced positioning options like:

• Padding - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions  ( Desktop | Tablet | Mobile ).
• Margin - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions  ( Desktop | Tablet | Mobile ).

🖌 Style

• Appearance > Customize > Header > Primary Menu > Style

 Custom colors for the Primary Menu items

📝  Note: Watch a video about using different menu colors on Desktop vs Mobile.

📝 Note: Neve has only one Primary Menu component included in the header builder. An extra Primary Menu component is part of Neve Pro's Header Booster module.

In the Style tab, you will find three color controls and one hover skin mode:

• Hover Skin Mode - there are four skin modes available for the primary menu. These are styles that apply while hovering the menu items. 

• Items Color - is the color of the items contained by the Primary Menu. 
  •  You can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
• Active Item Color - color for the active Primary Menu items. ( An item is active when it links to the currently viewed page or to a section on that page ). 
  •  You can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
• Items Hover Color - Primary Menu items color on hover. 
  • This will only be visible on the Desktop after you publish the changes.
  •  You can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.

📝 Note: This is an article about Global Color in Neve.

 Custom typography for the Primary Menu items

The typography subpanel found in the Style tab offers the following options:

• Font Family - with a vast list of fonts to choose from.
• Transform - None / Capitalise / Lowercase / Uppercase
• Weight - None / 100 to 900
• Font Size, Line Height (in PX / EM), Letter Spacing ( in PX) -  along with a reset button ( Desktop | Tablet | Mobile ).