Header Secondary 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.

Secondary Menu is an additional menu with similar settings as the Header Primary Menu.

📝  Note: The Secondary Menu is a single-level menu. Dropdown menus can't be used with this component.

Add Header Secondary Menu

Just click on the ➕ symbol and a list of components will appear. From there you can add the  Secondary Menu.

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


⚙️ General

  • Appearance > Customize > Header > Secondary Menu > General

Create your Secondary Menu

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


 📐Layout

  • Appearance Customize Header Secondary Menu > Layout
A

 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 )
B

 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 ).
  • Alignment - left / center / right 
    • Desktop | Tablet | Mobile


🖌 Style

  • Appearance Customize Header Secondary Menu > Style

A

 Custom colors for the Secondary Menu items

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

  • Items Color - is the color of the items contained by the Secondary Menu. 
    •  You can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
  • Items Hover Color - Secondary 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.
  • Hover Skin Mode - there are four skin modes available for the Secondary menu. These are styles that apply while hovering the menu items. 

B

 Custom typography for the Secondary 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 ).

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