Header Menu Icon

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. 

Header Menu Icon is an item that displays the Hamburger icon (with an optional label) which, on click, opens whatever is added in the Mobile menu content area of the builder.

📝 Note: By default, the Primary Menu is added there.

Add a Header Menu Icon

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

From there you can add the Menu Icon.

To open the customizing options, just click on the ⚙️ icon inside the Menu Icon component. This will open the Search Icon panel on the left side, from where you can customize the component.


⚙️ General

  • Appearance > Customize > Header > Menu Icon > General

Add a label before the Menu Icon

In the General tab, you can add your own label to appear just before the menu icon.


 📐Layout

  • Appearance Customize Header Menu Icon > Layout

Custom padding and margin for the Menu Icon

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, inside the header builder available space for the Menu Icon component.
    • Desktop | Tablet | Mobile 


Setup the Mobile menu-content

📝  Note: For more options about the Mobile menu content, you can check the Header Builder on Mobile devices chapter.

To have access to the Mobile menu content, click on the Mobile icon that appears on top of the header builder. That will open the mobile header builder, where you can create a completely different header builder for mobile devices.

But the Mobile menu content part is not used only on mobile devices. The Mobile menu content is part of the Menu Icon component, meaning that it will be visible once the Menu Icon is clicked, no matter the device.

Usually, you want to add the Menu Icon on the mobile header builder and have the Primary Menu added in the Mobile menu content, as in the image below.

To add new components in the Mobile menu content is as easy as on the entire header builder. Just click on the ➕ symbol and a list of components will appear.

Change the position and background of the Mobile menu content

📝 Note: For more options about the Mobile menu content, you can check the Header Builder on Mobile devices chapter.

By default, the Mobile menu content will slide-in, from the left side. But it can easily be changed to open from top to bottom, like a normal dropdown. Just click on ⚙️ on the left side of the Mobile menu content component, like in the picture below. After that, you just need to select the Toggle Dropdown from the Layout control.

To change the background color or background image, just go to the Style tab.

📝 Note: Even though the header builder only accounts for desktop and mobile, all settings have three media queries: Desktop, Tablet, and Mobile. Each setting can be set separately for Tablet by switching to the respective media query in customizer from the bottom left on the sidebar. 

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


🖌 Style

  • Appearance Customize Header Menu Icon > Style

In the style tab you can choose between two styles for the button:

    • Filled  
      • setting colors for Background and Text - with the option to choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
      • Border Radius - with a link button to connect all the values and a reset arrow, to undo the changes.

    • Outline
      • setting colors for Background and Text - with the option to choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
      • Border Radius - with a link button to connect all the values and a reset arrow, to undo the changes.
      • Border Width - with a link button to connect all the values and a reset arrow, to undo the changes.


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