Header Booster Module Documentation

Header Booster is part of Neve Pro Addon's modules. If you would like to learn more about the Neve Pro Addon, take a look at Neve Pro Addon's full documentation.

What's new with the Header Booster?


Activating the module

1
Install the Neve PRO plugin, using these instructions.
2
Navigate to Appearance > Neve Options > Neve Pro.
3
Take a look at the modules and enable the ones desired.


Features

The Header Booster module is enhancing Neve's header builder by providing new components, sticky and transparent menus, conditional headers, and a page header builder.

A

 Conditional Headers

This is one of the most exciting features of the Header Booster module. It allows you to  load different headers on different pages, creating an awesome-looking website with minimal hassle.

Step 1

Navigate to Appearance > Customize > Header.

You will see the  header builder area, with its three rows in which you can easily select and arrange the available components you can find while hovering over each division of the rows.

Step 2:

In the left-hand panel, above the Available Components section, you will see the Global Header Settings, which allows us to create the conditional header.

Here are two options available:

  • Enable Transparent Header
  • Show this Header Site-wide - enabled by default.
    • while this option is enabled, the header created inside the header builder area will appear on all pages of the site.

Step 3

To create different headers for different pages  disable the Show This Header Site-wide toggle. 

Once that is done, a new area will appear, where you will be able to  see all the existing headers (if there are any) and create a new header. 

By default, there will be just one header, called Default which will appear on all pages, as there are no special conditions for it at first.

Step 4:

To create a new header you need to click on the Add New Header button and enter the name of your choice.

Step 5:

Choose the conditions that must be met by the pages that will use the custom header. 

Step 6:

At this moment, the new header is created and all you have to do is to  customize it ( add, remove or rearrange any components in the header builder area ).

For this example, I've created a custom header that will appear on all single post pages. For that, I've selected the condition  Post Type is Posts, but the possibilities are endless. 

📝 Note: Even though you are creating a header that will appear on a specific page, in Customizer you will see the currently edited header apply on all pages. 

You can always know which header you are currently customizing. In the header builder area, you will see a notice in the form of "You are customizing the X Header"

📌 Check out this video for a real example

B

 New components for the builder

The Header Booster module adds new components to the Header builder.

📍  Appearance > Customize > Header

📝 Note: Read here about the components available in Neve ( Logo & Site Identity, Primary Menu, Menu Icon, Button, HTML, Search Form, Secondary Menu, Cart Icon ).

Neve Pro has comes with the following extra components:

  • Two extra Buttons - Button 1 and Button 2.
  • HTML components - HTML, HTML1, HTML 2.
  • One extra Search Form - Search Form 1.
  • One extra Menu Icon - Menu Icon.
  • Primary Menu components - that can be used to have multiple buttons, HTML areas, search forms, and primary menus in the header, whereas the free version allows for just one of each.
  • Logo & Site Identity - is another extra component that allows for multiple logos in the header, instead of just one in the free version. 
  • Social Icons - allows for unlimited social links in the header, without the need of any plugin. 

  • Contact - allows for unlimited fields of type Text, Email, or Phone.

C

 Transparent Header

The Transparent Header option allows you to easily create beautiful-looking headers. 

Enabling this option will set the header background to transparent and pull the page content to the top. That means your top part of the page content will be set as a background to the transparent header.

As Neve supports  conditional headers (mentioned before), the transparent header option is built accordingly. 

The process of creating a Transparent Header is similar to the conditional headers process.

Step 1: 

Navigate to  Appearance Customize Header.

Step 2:

In the left-hand panel, above the  Available Components section, you will see the Global Header Settings, which allows us to create the transparent header.

Step 3:

Here are two options available:

  • Show this Header Site-wide - enabled by default.
  • Enable Transparent Header
    • once that option is selected, a new option will appear to Show Transparent Header on the Homepage Only. By disabling that, you will make the header transparent on all pages of the site.

📝 Note: In the case of conditional headers, for each header created, you will be able to click on the Enable Transparent Header option.

D

 Sticky Header

Each of the header builder's three rows can be set up as Sticky and/or Show only on scroll

  • Sticky - means the row will always stick to the top of the page. 
  • Show only on scroll - means the row will appear only after the user scrolled the page.

The two options can be accessed by clicking on the ⚙️ icon from the beginning of each row.

Combining the two options, the effect is:

📝 Note: You have the possibility to shrink the sticky header on scroll, by following this doc.

E

Apart from the header builder, the Header Booster module allows for the customization of the Page Header area ( the area below the header, where the page title is displayed ). 

📍  Appearance > Customize > Page Header

The page header builder consists of two rows, where the user can edit, arrange, add the following components:

  • Buttons - Button 3, Button 4, Button 5.
  • HTML areas - HTML 4, HTML 5.
    • allows for some magic tags: {title}{date} and {author} which are replaced automatically on each page with the actual title of the page, publish date, and author name.
  • Page Header Menu component
  • Custom Layouts 

📝 Note: For more information about the Page Header Builder, we recommend checking the dedicated article available on this page.

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