The Primary Header Menu Component - Neve Header / Footer Builder

📝Note: This component is part of the Neve Header / Footer Builder.

The Primary Menu component is the easiest to use menu component, having a lot of customizations available.

🧰Using the Component

1
Start by adding the component into the rows, by clicking on the ➕ button and selecting the component.

2
Open the component's  settings to customize it, by clicking on the ⚙️icon.

📝 Note: There are three instances available for this component: Primary Menu, Primary Menu 1, Primary Menu 2, however, the last one presents a different menu location than the other ones.


🔮Customizing the Component

There are three panels with customizing options for this component, which allow you to create the desired header / footer:

General
Layout
Style

⚙️General Panel

When you click on the ⚙️ icon, the General tab will appear on the left side. From there you can add any widget from the library, by clicking on the ➕ button.

  • create your 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.

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


 📐Layout Panel

The layout options allow the following adjustments:

  • 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 )
  • 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 Panel

The Style panel contains two areas of use, one regarding colors or appearance, and one regarding typography.

Custom colors for the Primary Menu items
  • 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
  • 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 ).


🗂Useful Resources

Different menu colors on Desktop vs Mobile

  • Watch a video about using different menu colors on Desktop vs Mobile.

🎥 Video - how to create a Custom Header

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.