Articles on: Website Creation

How to create a header with a logo positioned in the center with Ex2-Theme?

Create a header with a logo centered with Ex2-Theme

Ex2-Theme comes with visual footer header builder by drag and drop. This tool gives you great freedom when designing your headers and footers. One of the interesting designs that can be done with the header builder is to create a header with a logo positioned in the center. This type of design only takes a few minutes to complete.

By following the simple steps presented in this article, you can easily build a header that displays your logo in the middle with your menu items distributed on each side of it.

How do I accomplish this?

To achieve this header design with the Ex2 theme, you will need to use header builder and three elements:

Site identity and logo
Primary Menu
Secondary Menu

Regardless of whether you started creating your website from scratch or imported one of our startup templates, the default header configuration you will see in the header builder should consist of the "Site Identity and Logo" element on one side, associated with the “Primary Menu” element on another:

To start building your header with a centralized logo, it is first necessary to create your menus.

Creating a Main and Secondary Menu

From the WordPress Dashboard, go to Appearance > Menus to configure your menu options. You can also access it from the “Menus” section available from Appearance > Customize.

Follow the steps to start the process of creating the two menus needed for your header:

Step 1: Click the “Create New Menu” button to start the creation.
Step 2: Name your menu. You can name the menu as you wish. In order to facilitate the tracking of things, we suggest naming this first menu "Left Menu" since it will be added to the left of the logo in the header
Step 3: Select the items you want to add to the menu. If you need to create new items, you can simply click on the "Add items" button.
Step 4: Scroll to the "Menu Locations" section and mark this menu as "Main Menu":
Step 5: Return to Appearance> Customize> Menus and repeat steps 1-3 to create your second menu. It is then recommended to name this menu «Right Menu» but you can name it as you wish.
Step 6: Scroll to the "Menu Locations" section and mark this menu as "Secondary Menu".

Create your header

Now that you have created your menus, go to Appearance > Customize > Header Builder and follow these steps to create your header:

Step 1: Add your "Site Identity and Logo" element to the center section of the main header and insert your logo. The main header is the middle header in your visual header generator.
Step 2: Finally, to create your header with a logo positioned in the center as above, add your main and secondary menu items. Click the left section of the main header and add the main menu item. Click on the right and also add the secondary menu. Click on "Publish" to save your header. You can position the menus closer to the sides of your website by dragging and dropping the main and secondary menu items.
Step 3: This step is optional and will depend on the design of your logo and other site identity options (if you have enabled the site title or tagline). You can add margins to your Site Identity and Logo element so that your logo is equal distance from both menus. Using the percentage (%) as the size unit will ensure that this distance is displayed on all screens.

Updated on: 27/03/2023

Was this article helpful?

Share your feedback


Thank you!