Add Additional Header Sections To Your Website’s Primary Header

Add Additional Header Sections To Your Website’s Primary Header

When you use the WPHubSite Theme to create your website header, there’s one section for the header. You can include a logo or just text for the title of your website and primary navigation.

That doesn’t leave a lot of options for other creative options such as additional menus, buttons, search, or even widgets. For that, you can activate the WPHubSite Theme pro module, Header Sections.

Header Sections allow you to add a section above and below the standard header. You can choose one or the other or even both!

Here’s what a header looks like with another section added to the top and the bottom of the primary header.

Website headers with an above and below header section added.

You aren’t stuck with just one item on each such as seen in this example. You can add a search bar and navigation to the top section then a widget and some text to the bottom section. It’s quite powerful and open to what your creativity enables you to do.

Ready to get started customizing header sections?

You’ll first need to activate the Header Sections pro module for the WPHubSite Theme. You can get more information about activating modules in this help article.

Now let’s get started in the WordPress Customizer.

Create an Above Header Section

Step 1: Click on the Header option.

Click the header option in the WordPress customizer.

Step 2: Click on Above Header.

Note: You can also click on the Below Header option to add a section below the primary header.

Click on the Above Header option.

Step 3: Choose a layout option. These are what each icon means (from left to right).

  • None: No header will be shown above the header.
  • Two Column: You have the option of selecting an item from two sections. You can also select an item from only one section if you’d like the item aligned left or right.
  • One Column: You can choose one item from the list and it will be centered in the top header row.

Step 4: Choose an item from the list that you’d either like for the first section or that you’d like left-aligned. You have the following options to choose from.

  • None: Nothing will display in the first section.
  • Menu: Create and assign a menu to the section you’re working in (see image labeled Menu Locations).
  • Search: Configure a search icon or bar that allows users to search your website.
  • Text/HTML: Type in any text or HTML to add information to your header.
  • Widget: Add a widget section that you can control in the widget section of the WordPress customizer. Adding a widget to a header isn’t recommended.

Step 5: Choose a section for the other side or choose none to let section 1 align left. If you chose a single item then you won’t have a second section.

Step 6: Adjust the height (in pixels) of the header.

Step 7: Adjust how thick the border along the bottom of the top menu is (in pixels). You can also set this to 0 for no border.

Step 8: Choose a color for the bottom border color if you chose to have a bottom border.

Customize the above header section with one or multiple sections and many options within each section.
Assign a menu to an above or below header section if you chose a menu.
Menu location selection for above header menu.

That’s it for adding a section above the header! There are other options for the above and below header sections depending on if you’re adding menus or not. You can also control colors/backgrounds, typography, and spacing.

Now you can either publish your changes or choose another option. You can also create a below header section with the following section.

Create a Below Header Section

This section starts off at the end of the previous section in order to get to the Above Header section. You can also start from the beginning of the WordPress customizer by clicking on the Header section.

Ready?

This section is going to create a search bar across the bottom of the header, like this:

Website below header with a search bar.

And here’s how to do that from the last section.

Step 1: Click the back arrow next to Above Header at the top of the WordPress customizer.

Select the back arrow in the WordPress customizer.

Step 2: Click on Below Header.

Select the Below Header option.

Step 3: Choose the single line below header section.

Step 4: Choose Search from the section drop-down.

Step 5: Choose Search Box from the search style drop-down.

Step 6: Type in 40 for the height of the header section.

Step 7: Type in 5 for the bottom border thickness.

Step 8: Choose any color you’d like for the border color.

Step 9: Click the Publish button.

Customize the below header section with a search bar.

Now you have a below header section that looks like this.

Website below header with a search bar.

There are several different options for the search box style too. All options except Search Box only show a clickable icon. When the user clicks the icon then the search box appears, expands, or fills the screen depending on the style you chose.

If you chose to add a section to the below header section that contains text, you can control this in the customizer too. There are sections for controlling the mobile header, colors/background, typography, and spacing too.

Grow your business with the power of WordPress & HubSpot.

Get WPHubSite for the most powerful web platform integrated with the power of HubSpot for your inbound marketing strategy.