Create a header template using Flexbox Container

Introduction

In this tutorial you will learn how to create a responsive Header Template using containers. It will be using four different widgets to best demonstrate how the flex properties can help you create headers that work across all devices without having to duplicate and hide as done in the past.

This tutorial will use several advanced flex properties such as Order and Size. You should have a basic knowledge of the Container properties before beginning this tutorial. The Site Logo, and Menu should also have been assigned and created.

Getting started

You should begin by creating a new Header Template in the Theme Builder. You may close the library options and start from a blank slate.

A Site Logo, Nav Menu, Search Form, and Menu Cart widgets are used to make this example. You may use the Social Icons widget rather than the Menu Cart if WooCommerce is not installed.

Adding the parent container

You will now set the foundation of your Header by adding a Container. A Boxed width will be used for this tutorial but may be changed to Full if desired once completed if your design requires.

1. Add a new Container by clicking the + icon
2. In the Container Layout Tab, the default layout will be used in this tutorial
3. Expand the Items properties accordion
4. The Direction property will be set to Row
5. Set the Align Items property to Center
6. The Justify Content will be set to Flex End
7. In the Style Tab, a Background color will be chosen. Using Global colors will save time a better workflow
8. In the Advanced Tab a top and bottom padding is applied (example: 10PX)

Adding the widgets

The widgets will now be added to the container. Four widgets will be used to best demonstrate the Flex properties of Order and Grow.

Why backwards? Once the Justify Content property is set to Flex End, it is easier to drag widgets in reverse order. The Site Logo widget will also be using the Grow and Custom Width properties to best fill the remaining space in the later steps. Once you have learned these properties, you may adjust your workflow as desired.

The Menu Cart Widget

In this tutorial a Menu Cart widget will be used as it is a common need of many websites. If you are not using WooCommerce, You may substitute the Social Icons widget for your learning.

1. From the Widget Panel drag and drop the Menu Cart (or Social Icons) widget to the Container. It will use the Flex-End property of the container to be right aligned
2. In the Content Tab of the Menu cart, the Hide Empty, and Hide Subtotal are applied by using the toggle
3. Set the widget’s Alignment to Center
4. From the Style Tab, the Border is set to 0%. This will be inherited from the Button’s global styles
5. In the Advanced Tab, navigate to the Order Property. Click the Custom order option and enter a value of four.

The Search Form widget

The Header is a good place to keep a search option. You may use the Full Screen option of the Search Form to create a functional, but minimalistic design, search capability for your visitors. 

1. From the Widget Panel, drag and drop the Search Form widget to the left of the Menu Cart
2. In the Content Tab, select the Full Screen Skin option from the dropdown menu
3. In the Style Tab, set the Toggle Icon background color to best match your design. Global colors are used to improve the workflow
4. From the Advanced Tab, set the Order property to three.

The Nav Menu widget

Your website’s navigation may now be added using the Nav Menu widget. Your menus should already be created in WordPress.

1. From the Widget Panel, drag and drop the Nav Menu widget to the left of the Search Form
2. From the Content Tab set the Alignment property to Right using the icons
3. In the Menu Dropdown options select the Full Width option using the toggle
4. From the Advanced Tab, set the custom Order property to Two.

The Site Logo widget

You will now add the Site Logo widget to the container. It should be previously assigned in the Site Settings. If not, you should do so now and then return to the editor.

1. From the Widget Panel drag and drop the Site Logo widget to the left on the Nav Menu
2. Choose the Left Alignment property by selecting the Icon. you may only see a slight change, this is normal
3. From the Advanced Tab, the Custom Order property is set to One
4. You now use the Size property. Select the Grow option. This will allow the Site Logo to automatically fill the remaining space of the Container and will now be left aligned by inheriting the value in step two.

Responsive mode

You will now learn to use the Custom Order property set in the widgets previously. This will allow you to change the order of each widget to best fit your design. This is a significant improvement over the reverse function previously available. It may allow you to avoid creating separate headers for each device. 

Tablet View

In the Table View, the Nav Menu and Menu Cart’s Order property will be revered using the Custom Order property. In order for these properties to be used they must be first set in the Desktop View earlier. If you have not set the order of a widget to a custom value, do so before switching the device views.

1. From the Container Layout Tab, adjust the width of the Boxed content (example: 90%)
2. Select the Nav Menu widget. In the Advanced Tab, you will now change the custom Order property to Four. Since the other items are inheriting their desktop view, it may not yet show in its proper location. This is normal
3. Next select the Menu Cart (or Social Icons) widget. Set the custom Order property to Three
4. Finally select the Search Form icon and set the custom Order property to Two (may already be in the correct location)
5. The Site Logo widget will retain the inherited Order value of One.  

Mobile View

For the mobile breakpoint, we will use the Wrap along with Justify Content properties of the Container. A Custom Width property is applied to the Site Logo to center it above the other three widgets.

1. From the Layout Tab of the Container, expand the Items accordion
2. Apply the Wrap property by clicking the icon
3. Change the Justify Content property to Space Between
4. Adjust the Container Width property to allow for some left and right margin (example: 95%)
5. Finally, select the Site Logo widget
6. In the Content Tab, change the Alignment to Center using the icon
7. In the Advanced Tab, change the Width property to Custom using the dropdown menu
8. Adjust the width of the Site Logo widget to 100%

Congratulations

You should now be able to create responsive Header Templates using the Container. You may now experiment with using different widget combinations and orders to wow your visitors.

Optional social icons

Here, the optional Social Icons widget mentioned in the tutorial above is shown to demonstrate.

Next steps

Now that you’ve seen how to build a Header template, check out how to build a template for the footer that will appear at the bottom of your site’s pages.  

To get the most out of Elementor, check out the Elementor Academy for helpful learning resources. If you come across any issues or need help, please contact our Support Center.