Getting started with the Header Builder

Neve comes with a versatile builder for the header area of your site. With just a few clicks you can create your perfect header.

Jump to:


πŸ“‚Open the Header Builder 

1
Navigate to Appearance > Customize.
2
Click on the Header panel to open the header builder.


πŸ”Ž Get to know the Header Builder Layout

The Header Builder consists of two areas:

  •  Header Live View Area - where you can see the live preview of how the header will look on the site.
  •  Header Builder Area - where you can add, reorder, remove, and resize components.


πŸ“‘ Header Builder rows

The header builder area has  three rows (Header Top, Header Main, and Header Bottom ) in which you can easily select and arrange the available components while hovering over each division of the rows. 

  • Appearance > Customize > Header

Each header row can be split into 2, 3, or 5 columns - this is done automatically based on where the first components are added. To start splitting a row into more columns, you can add a component on the left/right side which will split the row into two equal areas, like the middle one in the above screenshot. 

  • Two columns - the components on each side are automatically aligned based on the space they occupy:
    • the left column - aligns them starting from the left top the middle.
    • the right column - aligns them starting from the right to the middle.
  • Three columns - in addition to the case presented above, one component can be added exactly in the middle of the row and this one will be centered 
    • like on the third row in the above screenshot.
  • Five columns - once a component is added to the middle, it will be possible to use two new areas, left middle and right middle. The components alignment, in this case, will be as follow:
    • left area: items aligned from left to middle
    • left middle area: items aligned from middle to the left
    • middle: one centered item
    • right middle: items are aligned from middle to right
    • right: items are aligned from right to the middle
Add components
Remove components
Customize components

πŸ“  Note: For a better overview of the row settings, you can check this guide.

A

 Add components

While hovering over each division of the rows, click on the βž• sign and a list of components will appear. 

Each component has specific options you can customize once that component is clicked on.

Components can be added to the rows in two ways:

  • drag&drop them from the left sidebar

  • directly from the header rows

Here are some useful videos, regarding using multiple instances of the same header component:

β†’ using two logos

β†’ different colors for the menu items on Desktop vs Mobile

B

 Remove components

In order to remove a component, there are two steps that need to be done:

Step 1: hover over the component you want to remove.

Step 2: click on the βŒ icon on the right corner of the component.

C

 Customize components

To open the customizing options for a newly added component, you have to follow two steps:

Step 1: select the desired one.

Step 2: click on the βš™οΈ icon when the component is already enabled in one of the rows.


πŸ“± The Header Builder on mobile devices 

The header builder allows for  different headers on Desktop and on Mobile devices. Just click on the Desktop | Mobile icons and you will get access to the corresponding builder.

In the mobile header builder, things are similar to the desktop builder. The only difference is the additional column called Mobile menu content.

  • In Customizer - the Mobile menu content is hidden by default. 
    • To show the Mobile menu content when editing, click the Show label near it.
  • On the frontend - the Mobile menu content shows only when you click on the Menu Icon component.

To add components to the Mobile menu content, follow the same process as before:

  • click on the βž• sign and a list of components will appear from which you can choose.

Even though the header builder only accounts for desktop and mobile, all settings have three media-queries:  Desktop | Tablet | 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. 

A

 Change the background color of the header or add a background image

After selecting the Mobile version of the header builder, you will see the Mobile menu content which represents the area that will show up on mobile devices, after clicking on the menu icon

In order to change the background color of the header, these are the steps to follow:

  • click on βš™οΈ that appears while hovering the Mobile menu content. 
    • That will open options for Layout ( where you can make the mobile content open from the left side or act as a toggle ) and Style
      • There is where you can update the background of the area ( color or image ).

B

Mobile sidebar menu - opening behavior

The way the mobile sidebar menu opens/closes can be changed from the following options: Slide from Left, Slide from Right, Push from Left, Push from Right, Full Canvas, Slide down.

In order to use these options:

Step 1: enable the mobile header.

Step 2: click on βš™οΈ, near the Mobile menu content.

C

The mobile sidebar can also be used on Desktop, with the Menu Icon header component.

The mobile sidebar width can be changed from the Customizer options, with a different value for each device (Desktop | Tablet | Mobile).

D

 Automatically expanding drop-down menus on mobile devices

It is possible to set the menus to automatically expand the first level of the drop-downs on mobile devices.

  • Customizer > Header > Primary Menu

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