The Menu Icon Component - Neve Header / Footer Builder

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

The  Menu Icon component 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.

🧰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: This component is available in two instances: Menu Icon and Menu Icon 1.

🔮Customizing the Component

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

⚙️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.

Here you can add your own label to appear inside the menu icon.

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

 📐Layout Panel

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

• Margin ( Label ) - this control will ease lining up the icon with the label ( if one was previously added ).
• Padding and Margin - help set up the best position of the Menu Icon component, available in PX, EM, REM, and %, with a link button that helps establish the same dimension for all the directions  ( Desktop | Tablet | Mobile ).

🖌 Style Panel

In this area, you will find options of customization for the menu icon.

• Icon - use the dropdown list to pick a different icon than the default hamburger menu icon.

📝 Note: The list of icons does not apply only to the icon that appears on the website, but some of them can be observed when the menu is opened vs when it is closed.

• Filled - with color options for normal and hover mode and also with border-radius adjustments.  
  • 📝Note: You can boost the component's appearance by using the Gradient option that can be accessed from the background color tab.

• Outline - with color options for normal and hover mode, and also with border-radius and border width adjustments.  
  • 📝Note: You can boost the component's appearance by using the Gradient option that can be accessed from the background color tab.

🗂Useful Resources

Setup the Mobile menu-content

To access the Mobile menu content, click on the Mobile icon on top of the header builder. That will open the mobile header builder, where you can create a 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 to 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

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

🎥 Video - how to create a Custom Header