How To Set Up your Header

With the release of Avada 7, and the addition of Avada Layouts and the Header Builder, there is now a brand new method for creating your header in Avada.
So, now there are two ways in which to set up your header. The way we recommend is to create your own fully custom Header using Avada Layouts, taking advantage of the full power of Avada Builder, and either starting with a blank template, or importing one of 16 prebuilt header layouts and customizing it.
Alternatively, you can still select a prebuilt header from the options (Avada > Options > Header Content), but this is a Legacy method, and we strongly recommend using Avada Layouts instead. There are 7 header layouts to choose from in the options method, each with its own unique design and set of options. In addition, the header can be positioned on the top, left or right. There are several options to customize the header, as well as the content within it.
IMPORTANT NOTE: This document covers how to select and customize a Header using the Avada Global Options. To learn how to create a Custom Header using Layouts, please see Introducing Avada Layouts, and How To Build A Custom Header.OverviewSetting Up The HeaderHeader PositionsHeader Content OptionsHeader Background Image OptionsHeader Styling OptionsHeader Sticky OptionsHeader Social IconsMobile Header SearchSetting Up The HeaderStep 1 – Navigate to Avada > Options > Header to access the header options. You will see 4 sub-panels; Header Content, Header Background Image, Header Styling, and Sticky Header. See below for information on what each section contains.
Step 2 – Expand the Header Content sub-panel and select your desired Header Position setting.
Step 3 – If you』ve selected Top as your Header Position, don』t forget to choose your Header Layout and Slider Position. See below for more information.
IMPORTANT NOTE: Depending on the Header Position and Header Layout you choose, their respective dependent options will load and appear accordingly.Step 4 – If you』ve selected Left or Right as your Header Position, don』t forget to set your Header Content details. See below for more information.
Step 5 – If you』d like to upload a background image for your header, then you can do so by going to the Header > Header Background Image sub-panel.
Step 6 – To customize your header』s appearance and styling, then you can do so by going to the Header > Header Styling sub-panel.
Step 7 – If you』d like to enable a Sticky Header and customize it, you can do so by going to the header > Sticky Header sub-panel. To learn more about the Sticky Header, please read our Sticky Header article.
Step 8 – Once complete, click the Save Changes button.
Header PositionsAs mentioned above, you can set your header position to Top, Left or Right. Depending on the position you set, you will be presented with different options. To learn more about each header position, please check the links provided below.
Top Header PositionSide Header PositionHeader OptionsEach Header sub-panel contains specific options that pertain to different sections and aspects of your header. There are 4 sub-panels under the Header panel located in the Avada > Options > Header tab. These sub-panels are the Header Content sub-panel, Header Background Image sub-panel, Header Styling sub-panel, and the Sticky Header sub-panel. Continue reading below to learn about each sub-panel.
Header Content OptionsIn this section, you can select your Header Position, Header Layout, and Slider Position settings. Depending on the options you select here, their respective dependent options will load and appear. For example, if you select the Top header position, then the Header Layout options will load and appear.
In the Select a Header Layout section, you can choose from one of the 7 prebuilt Header designs. For a full rundown on each one of these prebuilt header designs, please see the Header Layouts doc.
Header Background Image OptionsIn this section, you can upload a background image for your header. If you have a Top Header set, then the Header Opacity located in Header > Header Styling must be set to 1 for the background image to display. If you have a Side Header set, then the Header Opacity must be set to transparent for the background image to display.
Header Styling OptionsIn this section, you can customize your main header』s appearance and style. For top headers, setting the background color』s opacity to below 1 will remove the header height completely. For side headers, setting the background color』s opacity to below 1 will add a color overlay over the background image.
Sticky Header OptionsIn this section, you can enable or disable a sticky header and customize it』s features and appearance. You can choose to enable it on tablets and mobiles, enable the sticky header animation, set a header background color, set the sticky header menu item padding, and the sticky header navigation font size. Read more about it here.
Header Social IconsYou can choose to display social media icons on your header to make it easier for your viewers to connect with you. To learn how to enable and customize the social media icons on your header, please read our Social Icons article by following the link below.
Header Social IconsMobile Header Search Icon/FieldA new option introduced in Avada version 5.6 lets you enable a search icon/field on your mobile header. This option is available on all header layouts. To learn how to enable the search icon/field on your mobile header, please read our Mobile Menu Search article by following the link below.
Mobile Header Search