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.
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.
Step 2: Click on Above Header.
Note: You can also click on the Below Header option to add a section below the primary header.
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.
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:
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.
Step 2: Click on Below Header.
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.
Now you have a below header section that looks like this.
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.