标签： headers

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

Setting Up The Page Title Bar

The Page Title Bar is the horizontal bar/section that sits directly below the menu/header. It can be added via a Layout Section using Avada Layouts, or via the Global Options.
If added via Avada Layouts, there are basically no limitations as to the Page Title Bar content, as the full range of Avada Builder Elements are available to you when building your custom Page Title Bar Layout. For more information on how to create a custom Page Title Bar, please see the How To Build A Custom Page Title Bar Layout doc.
If added via the Global Options, the Page Title Bar can contain the page title text, as well as the option of breadcrumbs, or a search bar. There are numerous options to customize the Page Title Bar, including background images and custom subheadings. The Page Title Bar has global options found in the Avada > Options > Page Title Bar panel, and individual options in the Avada Page Options, found in all pages and posts, that will override global settings. The page title bar can be completely displayed or hidden on every page or post globally, and you can display or hide it individually per page or post.
See examples of the Page Title Bar created via Avada Layouts on the Restaurant Website, the blog posts on the Winery Prebuilt Site, and across the Avada Nutritionist site, just to name a few. You can still see the global options method on various pages on the Science, University, Spa and Hotel Prebuilt Websites. Read on to find out more about each method.
IMPORTANT NOTE: In Avada 5.5 we enhanced the handling of H1 & H2 automatic assignment for titles in the Page Title Bar and single posts. The post header for single posts, single FAQ, single portfolio, and WooCommerce single product pages will automatically default to H1 if for example the Page Title Bar >> Page Title Bar Text is set to Hide. if Page Title Bar >> Page Title Bar Text is set to Show then the post header will default automatically to H2.,OverviewHow To Build A Custom Page Title Bar Using Avada Layouts How To Setup The Page Title Bar Via Global Options
How To Set The Page Title Bar Per Page/Post,How To Build A Custom Page Title Bar Using Avada LayoutsWith the new Avada Layouts, introduced in Avada 6.2, and extended in Avada 7, you can now create completely custom Page Title Bars, and assign them to Custom Layouts. See the Avada Layouts Documentation to learn how to use Avada Layouts, and watch the video below to see how to build a Custom Page Title Bar Layout.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,How To Setup The Page Title Bar Via Global OptionsWatch the video below for a visual overview of the Global Options method, or follow the step by step process below.
Step 1 – Navigate to the Avada > Options > Page Title Bar panel to access the page title bar options.
Step 2 – Locate the 『Page Title Bar』 dropdown and select either the Show Bar and Content or Show Content Only option to enable the Page Title Bar.
Step 3 – In the Page Title Bar panel, you can also customize other options such as page title bar styling, background image, and the like.
Step 4 – The right side of the page title bar can display breadcrumbs or a search bar. To choose which one, navigate to the Avada > Options > Page Title Bar > Breadcrumbs / Search Bar sub-panel and locate the 『Breadcrumbs / Search Bar Content Display』 option.
Step 5 – These settings will take effect for all page title bars on your site. To set different settings per page or post, please see the following section.
View The Page Title Bar Global Options,How To Set The Page Title Bar Per Page/PostStep 1 – Edit the page or post you want to control the Page Title Bar on.
Step 2 – Head to the Avada Page Options and the Page Title Bar tab.
Step 3 – In this tab, there are numerous options that you can set to customize the page title bar per page or post. You can show or hide the page title bar per page/post, enter custom Heading text or Subheading text, set page title, and page title subheading font color, choose custom background image or color, set parallax effect, change the overall height of the bar, and other styling options. All of those options will take effect for the individual page or post you set them on.
Step 4 – When finished, make sure to save the changes.

Side Header Position

When setting up a header in Avada, you can choose to set the position to Top, Left or Right. In this article, we will focus on the Side Header Position (Left or Right) and the different options you can set for them, including the styling options. Continue reading below to learn more about the side header position. If you』d like to read about Headers in general, please refer to our Main Header Setup article.
Main Header SetupTop Header PositionSide Header Position SetupSetting the header to the Left or Right position displays it and the menu items vertically on your site. You won』t be able to choose any header layouts when your header is set to the side, but you can still add header content and adjust the styling.
IMPORTANT NOTE: The header padding and logo margin options will auto adjust based on your Header Position selection for ideal aesthetics.Step 1 – Go to the Avada > Options > Header tab.
Step 2 – In the Header Content sub-panel, set the 『Header Position』 option to Left or Right to display the header on the side.
Step 3 – You can choose to add content to your side header using the Header Content options. Simply choose the content you』d like to display from the dropdown boxes.
Step 4 – Under the Header Styling sub-panel, Set the 『Header Width For Left/Right Position』 option that controls the width of the left or right side of the header. This option accepts a numerical value. For example, 280. You can also customize your side header』s appearance on this sub-panel.
Step 5 – Click the 『Save Changes』 button to apply your changes.
IMPORTANT NOTE: The Header Content 1-3 options will only show on desktop for the side header layouts. They will be hidden on mobile view.Side Position Content AreasAvada includes 3 different content areas for headers, but access to these content areas depends on which header version you choose. Setting a side header allows you access to all 3 Header Content options. Simply select from the dropdown the content you』d like to display, such as Contact Info, Social Links, Navigation, and the like. If you do not want to display any of the Header Content options, simply select the Leave Empty option. Along with these, there are also fields that allow you to enter your own contact details and tagline to be displayed.
Side Header Position StylingYou can customize your header』s appearance by going to the Avada > Options > Header > Header Styling sub-panel. If you would like to add a background image to your side header, then you can do so by going to the Avada > Options > Header > Header Background Image sub-panel. For your background image to appear, your header opacity must be transparent or set to below 1. If you set your header opacity to below 1, then your side header will display a color overlay on your background image.

Top Header Position

When setting up a header in Avada, you can choose to set the position to Top, Left, or Right. In this article, we』ll be focusing on the Top Header Position and the different layouts and options you can set for them. We』ll also cover some styling options and how this affects your site. Continue reading below to learn more about the top header position. If you』d like to read about Headers in general, please refer to our Main Header Setup article.
Main Header SetupSide Header PositionTop Header Position SetupSetting your header to the Top position displays it and the menu items horizontally on your site. This also allows you to choose header layouts (6 to choose from) that are available only when you set your header to the Top position.
Step 1 – Go to Avada > Theme Options > Header.
Step 2 – Locate the Header Position option and select Top.
Step 3 – Once you』ve set your Header Position to Top, the dependent options for the top header position will be displayed.
Step 4 – Thereafter you can change the slider position, header content, phone number and email address for contact info. For a more in depth description of these options, please continue reading below.
Step 5 – Click 『Save Changes』.
* Remember you can also change the Header Background Image, Header Styling, and Sticky Header options for your chosen header.
Top Header Content AreasAvada includes 3 different content areas for top position headers. The corresponding header content areas will load and be accessible based on the header layout you choose.

Header #1, #6, & #7 does not display any content areas.

Header #2, #3, & #5 displays content areas 1 & 2.
Header #4 is unique and can display all three header content areas.Top Header StylingFor header styling options please go to Avada > Theme Options > Header > Header Styling. You can add a background image to your top header here Avada > Theme Options > Header > Header Background Image.
For your background image to be visible your header opacity must be set to 1. If the opacity is set to anything less than 1, your background image will no longer be visible and your header height will be removed completely.
Top Header LayoutsBelow are the 7 Top Header layouts to choose from. Each layout is unique and offers different content area settings. Header layouts 2 – 5 allow additional content areas via the Header Content options 1 – 3. Header version 1, 6 and 7 does not display any of the content areas. Please continue reading below to learn more about each layout. For full details, please view our Header Layouts document.
IMPORTANT NOTE: The header padding and logo margin options will auto adjust based on your selection for ideal aesthetics.Top Header Layout #1This layout includes your main menu items and your logo.
Top Header Layout #2This layout includes your main menu items, your logo, header content area #1 (top left), header content area #2 (top right), and a stylish top color bar that is the same color as the primary color you』ve set. You can choose which content to display in the header content areas. You can also change the background color of the top bar here Avada > Theme Options > Header > Header Styling.
Top Header Layout #3This layout includes your main menu items, your logo, header content area #1 (top left) and header content area #2 (top right). You can choose which content to display in the header content areas and you can change the background color of the top bar here Avada > Theme Options > Header > Header Styling.
Top Header Layout #4This layout includes your main menu items, your logo, header content area #1 (top left), header content area #2 (top right) and header content area #3 (lower right). You can choose which content to display in the header content areas and you can change the background color here Avada > Theme Options > Header > Header Styling.
Top Header Layout #5This layout includes your main menu items, your logo center aligned, header content area #1 (top left) and header content area #2 (top right) . You can choose which content to display in the header content areas and you can change the background color in the Avada > Theme Options > Header > Header Styling.
Top Header Layout #6This layout is a desktop version of a mobile menu. It includes your logo, a search icon, and a hamburger icon. When you click the hamburger menu, your parent level menu items will appear center aligned on the page with a full screen background color. This layout works from desktop to mobile and behaves the same way. You can customize the Flyout Menu by going to Avada > Theme Options > Menu > Flyout Menu.
IMPORTANT NOTE: Top Header layout #6 only displays the Parent Level menu items. Any Child Level menu items will not be displayed. Mega Menu features are also disabled on this layout.Top Header Layout #7This layout features a centered logo and distributes your menu items evenly on each side. It is recommended to have an even number of menu items so the design is balanced.

Understanding Header Layouts

With Avada 7.0 and up, you now have the ability to create fully customized header layouts on your Avada website, using the Header Builder in Avada Layouts, and the full design power of Avada Builder.
You can build a Header Layout from scratch using the wide range of Elements in Avada Builder, or you can get a head start on your Header, by importing a prebuilt one from Avada Studio. A Header layout can be global, meaning it will display on every page of the site, or it can be conditional, and just display on certain pages, categories, or custom post types etc. In that way, you can even have multiple headers, for different sections of your site.
Read on to Understand Header Layouts in Avada, and watch the video below for a visual overview.,Overview
The Avada Layouts Interface
Creating A Custom Layout
Creating A Custom Layout Section

Editing A Custom Layout Section
Adding An Avada Studio HeaderElements Of A Custom Header
Example Of A Custom Header

Setting Conditions For A Conditional Layout

Conclusion,The Avada Layouts InterfaceA Custom Header is technically a Layout Section that you add to a Layout. See Introducing Layouts in Avada for a general overview of Layouts, and Understanding Layout and Layout Sections to understand the difference between the two parts of the a Layout, but for now, let』s now look at creating a Custom Header Layout Section.
You can find Layouts at Avada > Layouts. This interface is where you both create and manage your Layouts and Layout Sections in Avada. Initially, there is just a Global Layout, and by default this is empty, with no attached Layout Sections, as can be seen below.,Creating A Custom LayoutYou can add a Header Layout Section to the Global Layout, or to a Conditional Layout, set to only show on specific custom post types, or evben single pages etc. The Global Layout is already there by default, but for a Conditional Layout, we have to first create a Layout.
Creating a Layout is done on the Layouts page, by simply adding an appropriate name and then clicking on Create New Layout, as can be seen below.,Editing a Custom Layout SectionWhen you first edit a new Layout Section, you come to the default WordPress Editor. From here, you can choose to use Avada Builder, or Avada Live. It is here we create our Custom Layout Sections. Please refer to Creating Layout Section Content for more information on this, but in short, you can build anything you want here.
Anything you can build in the Avada Builder can constitute the content of your Layout Sections. You can have multiple columns, background images, dynamic data… anything. The freedom this gives is enormous. The Layout Section is literally that – a section where can create the Layout. The content itself comes from the Builder, and what you can do is only limited by your imagination.
IMPORTANT NOTE: It』s important to note that when you have a Header Layout Section attached to a Global Layout, the Header Options in the Theme Options will not be available. Everything in the Header is controlled in the Layout Section by the content options and the Layout Section Options, the equivalent of the Page Options in Layout Sections.,Adding An Avada Studio HeaderAn easy way to get started with a Custom Header is to use Avada Studio to add a Header to your Header Layout Section. Headers are just one type of pre-designed content you can add with Avada Studio, which you can then customize to meet your own requirements. There is a wide range of different Header designs you can import into your Layout Section, as a starting point for your own Custom Header, with more being added to Avada Studio regularly.
Adding a Studio Header to your Layout is very easy. When you first edit your newly created Header Layout Section in Avada Builder, just click on the Avada Studio link on the Starter Page, and the Library will open on the Studio tab, with all the available headers ready to import.,Elements of a Custom HeaderFor a Custom Header, one essential element would likely be the new Menu Element. This is the only specifically new Design Element made for the Header Builder, and has a huge range of features to configure and display your menu in multiple ways.
The Image Element is another Element that will likely be in most Header designs, and this has been expanded, so you can use it to place your logo into your Header Layout as either an image or Dynamic Data. And remember, that with the Header Builder, you can use any Design Elements to complete your design, so depending on your design you might also use any number of other Elements.
For a Header Layout, there are also options in the Container and Column Elements you can use, such as Conditional Rendering, Container Background Options, Sticky Containers, Container Offset, Responsive Options Sets, Sticky Visibility options and many more. Please see the Container and Column Element docs for full details on their new features. The choice and the design are completely up to you, and the entire design flexibility of Avada Builder is at your fingertips.
View the Menu Element Doc for Full information on the new Menu Element,Example Of A Custom HeaderAs mentioned, there are almost no limits for what you can create using the Header Builder. As an example, see below for the Header Layout design of the Pet Supplies Website. As you can see below in Wireframe view, it is a multi-container layout, using many of the features available in Avada, including the Menu Element, a dynamic logo, Custom Column widths, a Sticky middle Container with additional Elements that only have Sticky Visibility, as well as responsive changes in Tablet and Mobile layouts.
The top Container holds the logo, search bar, some text, and the WooCommerce Cart icons. The middle container holds the main menu, which itself has sub-menus and a mega menu, and a logo and another two menus with visibility options applied, so that they only show when the Container becomes Sticky. The last Container just has a tiled background image and three text blocks with icons and text. The Header also makes good use of the new Responsive Option Sets feature, displaying a different header layout for both Tablet and mobile.
Make sure to watch the How To Create A Custom Header video, embedded at the top of the page, to see further details of this truly custom header.
See below for an example of what this Header looks like in Desktop view, but to truly get a good feeling for all that』s going on in this Custom Header, it should be experienced on the live site, which you can access here.,Setting Conditions For A Conditional LayoutWith a Global Layout, there are no Conditions. This is because it』s global, and any Layout Sections added to it will be used on every page. If, however, you wanted a Custom Header just on some pages of your site, you』d need to add a Header Layout Section to a Conditional Layout.
With any Conditional Layout, you need to set the conditions of the layout. This is best done last, because as soon as you set the conditions, the layout is active, and if you do this after first creating the Layout Section, but before editing it, the pages displayed that fit the conditions would be empty in those sections.
To add a condition, or conditions, simply mouse over the bottom of the Layout, and choose Add A Condition. This brings up the Layout Conditions Dialog. Please see Understanding Conditional Layouts for more information on Conditional Layouts.
In the example of the Pet Supplies Website, there is also a Conditional Custom Header, which only displays on one page, the Alternate Home Page. See below for the Conditions set to achieve that, and further below for an example of what that Header looks like on the Alternative Home page.,ConclusionWith Avada Layouts, creating a Custom Header is not only now a reality, but more like an unlimited possibility. Not only can you use the full power of Avada Builder to create almost any Header you can conceive of, and thanks to the power of Conditional Layouts, you can also show, or hide, the Header on any page, category, custom post type, or any combination of conditions you can think of. And with Avada Studio, adding a new Header is as easy as it gets.
Avada Layouts is a game changer in the true sense of the word. It enables such freedom of design, and gives such flexibility in deployment, that building Headers will simply never be the same again.

Using The Sliding Bar

The Avada Sliding Bar is a widgetized section that can collapse and expand by clicking the active icon. This is perfect for adding information,content, widgets, buttons, menus etc to engage your audience. You can choose between 1-6 columns for the sliding bar, and you can choose the position of the sliding bar to be the top, left, right, or at the bottom of your site. You can also choose to make it sticky (for top or bottom position only). See the sliding bar live in some of our demos here: Classic, Promote, Adventure, University, and Information Technology, and watch the video below for a visual overview.,OverviewHow To Setup The Sliding Bar
The Sliding Bar Position

Number Of Sliding Bar Columns

Sliding Bar Toggle Style
Adding The Sliding Bar To An Instance Of The Menu Element
How To Add Widgets To The Sliding Bar

Sliding Bar Options,How To Setup The Sliding BarStep 1 – Navigate to Avada > Options > Sliding Bar.
Step 2 – The Slider Bar can be enabled/disabled on desktop and mobile using the 『Sliding Bar on Desktops』 and 『Sliding Bar On Mobile』 options. Using the sliding bar on mobile is limited due to space, please see the description in the Global Options, and the important note below.
Step 3 – Choose where you want it to be positioned (Top, Right, Bottom, or Left). For Top and Bottom positions, you will have the option to make it sticky.
Step 4 – Decide whether or not the sliding bar opens on page load by default, the number of columns (1-6), and the content alignment (Left, Center, Right).
Step 5 – New features were added in Avada version 5.5 – these options are 『Sliding Bar Width』, 『Sliding Bar Column Alignment』, and 『Sliding Bar Content Padding』. The 『Sliding Bar Width』 and 『Sliding Bar Column Alignment』 options are only available if you choose Right or Left position only. Set these options the way you prefer.
Step 6 – Styling options are found under Sliding Bar Styling section and under this section, you can set the style you want for the sliding bar toggle. You can choose from Triangle, Rectangle, Circle, or Main Menu Icon options.
Step 7 – For the other styling options, you can choose a background color, background color opacity, toggle color, heading font size, font color and more. You can also choose to turn on or turn off the border on your sliding bar.
Step 8 – Once you』re done setting the options, click 『Save Changes』 button.
Please continue reading below to learn more about each of the Sliding Bar options.
Please Note – If the sliding bar is turned on for mobile, it is important to note that due to mobile screen sizes and overlapping issues, the triangle toggle style in the top right position will be forced on mobile regardless of your selections and desktop styles.767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada,Sliding Bar PositionThe Sliding Bar position can be selected as Top, Right, Bottom, or Left. This is set in the Theme Options: Avada > Options > Sliding Bar > Sliding Bar Position.
On top of this, the Sliding Bar can be made sticky when in either the Top or Bottom position. This means that the Sliding Bar stays visible at the Top or the Bottom of the viewport when you scroll. This Sticky setting is not needed when choosing Left or Right, as the Sliding Bar will always be visible when in those positions.
Another main option is the Sliding Bar Width. This controls the width of the sliding bar on left/right layouts. With Top, and Bottom positions, the widget content determines the height of the Sliding Bar.
Finally, in the Toggle Style Option, you can also choose Main Menu icon, which of course, places the Sliding Bar Toggle as a plus symbol in the Main Menu itself.
These changes go a long way towards enabling the type of setup, long asked for by users, such as the custom Sliding Bar on our Demo sites that show the other demos. With some imagination and the right content, almost anything is possible with the Sliding Bar.
IMPORTANT NOTE: To add a Sliding Bar to a Menu when using Custom Layouts, we have added the Sliding Bar Toggle as a Special Menu Item in the WordPress Menu Settings. See the Menu Settings Doc for more info.,Number Of Sliding Bar ColumnsWith the Sliding Bar, you can have anywhere from 1 to 6 columns. This is set in the Theme Options – Avada > Options > Sliding Bar > Number of Sliding Bar Columns.
When using the Left or Right positions, there is also an option for the alignment of the columns. Select between Stacked or Floated. This effectively makes your widget content display in rows (Stacked) or columns (Floated).
For Top, and Bottom positions, the columns themselves are evenly distributed across the full site width. There is also the option to control the content padding in the columns via the Sliding Bar Content Padding section.,Sliding Bar Toggle StyleThere are also several styles you can choose to style your Sliding Bar Toggle. These are Triangle, Rectangle, Circle, and Main Menu Icon. These options are found in the Global Options: Avada > Options > Sliding Bar > Sliding Bar Styling > Sliding Bar Toggle Style. See a screenshot of the area here.
These options also affect the placement of the Sliding Bar Toggle. For the Triangle, the Toggle is at the very corner of the viewport (corresponding to the position you have selected). For the Rectangle, the Toggle is placed in from the edge to create a tab effect, while the Round option positions the Toggle freestanding, away from the edge. The Main Menu Icon option places the Toggle in the Main Menu instead, as a + symbol. You can select the color of the Toggle via the Global Options.,Adding The Sliding Bar To An Instance Of The Menu ElementWhen assigning a Header via the Global Options, there is an option to add a Sliding Bar Toggle to your main menu. When using the Menu Element in a Custom Header, however, you have to assign a Sliding Bar in a different way. As the Global Option for the Sliding Bar Toggle Style > Main Menu Icon will not work when using the Menu Element, there is the option to add a Sliding Bar Toggle to your Menu via the Avada Special Menu Items. Read more about this from the link below.
Read About The Avada Special menu Items,How To Add Widgets To The Sliding BarStep 1 – To add your widget areas to the Sliding Bar, navigate to WP Dashboard > Appearance > Widgets.
Step 2 – You will see a 『Sliding Bar Widget X』 section on the right hand side for each Sliding Bar column (from 1-6 columns) selected in theme options. To add the widgets, drag and drop the widgets you want from the left side into the sliding bar widget areas on the right side.
To learn more about widgets and all they can do across the theme, please visit the Widget section of our documentation.
View Widget Documentation,Sliding Bar OptionsThe Global Options for the Sliding Bar can be found at Avada > Options > Sliding Bar. See below for a rundown of each option.
Sliding Bar on Desktops – Allows you to display the sliding bar on desktops.
Sliding Bar on Mobile – Allows you to display the sliding bar on mobiles. Important Note: Due to mobile screen sizes and overlapping issues, when this option is enabled the triangle toggle style in the top right position will be forced for square and circle desktop styles.
Sliding Bar Open On Page Load – Allows you to have the sliding bar open when the page loads.
Sliding Bar Position – Allows you to set the position of the sliding bar to be in the top, right, bottom, or left of your site.
Sliding Bar Width – Allows you to set the width of the sliding bar on left/right layouts. Enter value including any valid CSS unit. For example: 300px
Sticky Sliding Bar – Allows you to enable a sticky sliding bar. Note: This option is available for top/bottom position only.
Number of Sliding Bar Columns – Allows you to set the number of columns you want to have in the sliding bar.
Sliding Bar Column Alignment – Allows you to have the sliding bar columns be stacked (one above the other) or floated (side by side). Note: This option is available for right/left position only.
Sliding Bar Content Padding – Allows you to set the top/right/bottom/left paddings of the sliding bar area. Enter values including any valid CSS unit. For example: 35px, 30px, 35px, 30px
Sliding Bar Content Alignment – Allows you to set the sliding bar content alignment to Left, Center, or Right.
Sliding Bar Toggle Style – Allows you to set the appearance of the sliding bar toggle to Triangle, Rectangle, Circle, or Main Menu Icon.
Sliding Bar Background Color – Allows you to set the background color of the sliding bar.
Sliding Bar Item Divider Color – Allows you to set the divider color in the sliding bar.
Sliding Bar Toggle/Close Icon Color – Allows you to set the color of the sliding bar toggle icon and the close icon when using the Main Menu Icon as toggle style.
Sliding Bar Heading Font Size – Allows you to set the font size for the sliding bar heading text. Enter value including CSS unit (px, em, rem). For example: 13px
Sliding Bar Headings Color – Allows you to set the text color of the sliding bar heading font.
Sliding Bar Font Color – Allows you to set the text color of the sliding bar font.
Sliding Bar Link Color – Allows you to set the text color of the sliding bar link font.
Sliding Bar Link Hover Color – Allows you to set the text hover color of the sliding bar link font.
Border on Sliding Bar – Allows you to display a border line on the sliding bar which makes it stand out more.

Adding The Logo & Favicons

You can upload an image file of any size as your website logo in Avada in 3 different areas; the default logo, the sticky header logo and the mobile logo. This gives you the flexibility to adjust your logo depending on where it』s displayed. Avada is also retina ready, so there are additional options to upload a retina 2x logo for high resolution devices.
When building a Header Layout Section through Avada Layouts, you can also add your logo via the Image Element, either manually, or using Dynamic Content. Please see the How To Use The Image Element To Add A Logo Into A Header Layout Video for more information on that method. Please read below for more information on logos and the different areas you can display them in, favicons, as well as the styling options available.
IMPORTANT NOTE: Avada allows logos to be retina ready, however they are not required to be used. If you do not upload a retina logo, then the default normal logo will be used on all screens.Available Logo AreasDefault Logo Fields – Upload a default logo that will be displayed in all areas (Default/Sticky/Mobile) unless a unique logo is uploaded to the sticky header and/or the mobile header logo option.Sticky Header Logo Fields – Upload a unique logo that will only appear on your sticky header. This is optional.Mobile Header Logo Fields – Upload a unique logo that will only appear on mobile devices. This is optional.How To Upload A Default LogoStep 1 – Navigate to Avada > Options > Logo > Default Logo.
Step 2 – Locate the 『Default Logo』 option and click the 『Upload』 button to upload your logo image file. View screenshot here.
Step 3 – This step is optional. You can upload a default retina logo using the 『Retina Default Logo』 option.
Step 4 – Click 『Save Changes』.
IMPORTANT NOTE: The retina default logo dimensions must be exactly twice that of your standard logo. For example, if your standard logo is 100px x 100px, the retina version of your logo must be 200px x 200px.How To Upload A Sticky Header LogoIMPORTANT NOTE: Uploading a sticky header logo is optional. If no unique logo for the sticky header is uploaded, the default logo will be displayed instead.Step 1 – Navigate to Avada > Options > Logo > Sticky Header Logo.
Step 2 – Locate the 『Sticky Header Logo』 option and click the 『Upload』 button to upload your logo image file. View screenshot here.
Step 3 – This step is optional. You can upload a sticky header retina logo using the 『Retina Sticky Header Logo』 option.
Step 4 – Click 『Save Changes』.
IMPORTANT NOTE: The retina sticky header logo dimensions must be exactly twice that of your standard logo. For example, if your standard logo is 100px x 100px, the retina version of your logo must be 200px x 200px.How To Upload A Mobile LogoIMPORTANT NOTE: Uploading a mobile logo is optional. If no unique logo for mobile devices is uploaded, then the default logo will be displayed instead.Step 1 – Navigate to Avada > Options > Logo > Mobile Logo.
Step 2 – Locate the 『Mobile Logo』 option and click the 『Upload』 button to upload your logo image file. View screenshot here.
Step 3 – This step is optional. You can upload a retina mobile logo using the 『Retina Mobile Logo』 option.
Step 4 – Click 『Save Changes』.
IMPORTANT NOTE
The retina mobile logo dimensions must be exactly twice that of your standard logo. For example, if your standard logo is 100px x 100px, the retina version of your logo must be 200px x 200pxLogo SettingsAvada offers various settings to help with the styling and alignment of your logo. These options are located in the Avada > Options > Logo > Logo section and will only affect the default logo that displays in the header on desktop mode.
Logo Alignment – Controls the logo alignment. 「Center」 only works on Header 5 and Side Headers.Logo Margins – Controls the top/right/bottom/left margins for the logo. Enter values including any valid CSS unit, for example: 31px, 31px, 0px, 0pxLogo Background Color – You can optionally add a logo background color for header versions v1, v2, v3, v6, v7 and side headers. Note: The logo background is only visible in desktop view and does not apply to the mobile header view.Favicon OptionsThe Favicon Options are located in the Avada > Options > Logo > Favicons section. A favicon is an icon typically displayed in the address bar of a browser accessing the site or next to the site name in a list of saved bookmarks. Avada offers several fields to upload different types of favicons. Each one has its own unique size listed in the description.
To add favicons, simply click the 『Upload』 button next to the appropriate field, then select the favicon file you would like to use. The Retina icon version options will first appear when you have uploaded the default icons.
IMPORTANT NOTE: Favicons changed here will only display on the front end of the site. Back end favicons can only be changed in the Customizer.Favicon – The main favicon for your website. Image must be 16px x 16px or 32px x 32px.Apple iPhone Icon – For Apple iPhones. Image must be 57px x 57px.Apple iPhone Retina Icon – For Apple iPhones Retina. Image must be 114px x 114px.Apple iPad Icon – For Apple iPads here. Image must be 72px x 72px.Apple iPad Retina Icon – For Apple iPads Retina. Image must be 144px x 144px.

Header Background Parallax Options

There is a single, and simple, option for setting parallax scrolling on the header background image. This causes the header background image to be fixed, and so it doesn』t move with the header when you scroll.
This is found under Avada > Options > Header > Header Background Image, and the parallax option will show when an image is selected as the header background. Set Parallax Background Image to On to use a parallax scrolling effect on the background image. There is also an option for 100% Background Image, to have the header background image display at 100% in width and height according to the window size, and another option to control any repeating of the background image.
This setting only works for the top header position. For top headers, the image displays on top of the header background color and will only display if the Header Background Color is fully opaque (i.e. it is a hexadecimal value, as opposed to an rgba value with transparency – eg. rgba(255,255,255,0.75)).
IMPORTANT NOTE: This option will not work when the Sticky Header option is enabled.

Header Layouts via Global Options

For an overview of the features of Avada Headers, visit this page!With the release of Avada 7, Header Layouts had quite an upgrade. With the release of the Header Builder as part of the new Avada Layouts feature, you can now also build your own custom headers. See Introducing Avada Layouts and How To Build A Custom Header to learn more about this amazing new option for your website. When building a custom header in Layouts, you can either start with a blank template, or alternatively, you can also import any of the original 7 headers, or one of a further 9 new header designs, into the Header Layout Section as a starting point, to then customize further for your Custom Header. See Prebuilt Headers For Layouts for more information on the specific headers you can import.
But Avada still offers a range of 7 customizable one-click Header Layouts via the Avada Global Options, which you can find at Avada > Options > Header > Header Content. Each Header Layout offers a different look and set of features, so it is important to familiarize yourself with each one.
Following on from the Main Header Setup document, where we look at the Header Options available in the Global Options, in this document we look at examples of each of the 7 header layouts that can be assigned from the Global Options, and how they are configured.
Overview
Header Position

Header Layout 1

Header Layout 2

Header Layout 3
Header Layout 4Header Layout 5Header Layout 6Header Layout 7
Mobile Header Layouts,Header PositionThe Header Layouts display at the very top of the page by default, but in the Avada Options (Avada > Options > Header > Header Content) there are also options to display the header at the left or the right of the page, as well as above or below any Slider. The main menu height, header padding, and logo margin options will auto-adjust based on your selection for ideal aesthetics. Let』s take a deeper look at each individual Header Layout.,Header 1Header 1 is a simple layout, with the Logo on the left and the menu on the right. The Logo is inserted through the Theme Options at Avada > Options > Logo > Default Logo. Note that there is also a field, directly below the default Logo, for a Retina Logo, which should be exactly twice the size of the default Logo. This is so the logo is crisp on Retina-enabled screens. For more information on how Avada controls responsive images, please read this article.
For the menu items to show in the Header, you must first create a menu in Appearances > Menus, and then allocate the menu to the Main Navigation Display Location. For menu styling, navigate to Avada > Options > Menu > Main Menu for a large variety of styling options, as well as the Avada Menu Options found in the individual menu items in the WordPress Menus.
Read more about Menus hereSee Header 1 in action here!,Header 2Header 2 has the addition of a Header Top Section, which offers a space, both to the left and to the right, for additional content. The options for both the left and the right sections are: Contact Info, Social Links, Navigation or Leave Empty. These options are applied via the Header Content 1 and 2 options in the Avada > Options > Header > Header Content section.
Contact Info is entered directly below the Header Content 3 option. There is a Phone Number For Contact Info field, and an Email Address For Contact Info field.
If populated, the email address will be automatically linked with a 「mailto:」 html tag. Additionally, you can make the Phone Number clickable, by using the 「tel」 html tag, when entering the number. Example below.
Copy to ClipboardCall us: +1 (098) 765 4321 1Call us: +1 (098) 765 4321Header 2 also has a 3px line at the very top of the menu, which gets its color from the Site Color, found in Avada > Options > Colors > Primary Color. By default the Header Top background color is white, but it can be changed to any combination of color and transparency you wish, via the Color Picker found at Avada > Options > Header > Header Top Background Color.
See Header 2 in action here!767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Header 3Header 3 is essentially the same as Header 2, but with a few small differences. The thin 3px line at the top is removed and the Header Top section, by default, takes on the primary theme color. Of course, this can be changed via Avada > Options > Header > Header Styling to any color and transparency you wish.
See Header 3 in action here!,Header 4Header 4 makes changes to the logo and menu area. The Header Top section is the same as in the previous Header layout, but below that, the middle section contains the Logo to the left and adds a configurable middle right section to the Header layout. This section is configured via Avada > Options > Header > Header Content > Header Content 3. The possible combinations are: Tagline and Search (default), Search, Tagline, Banner, and Leave Empty. If you choose Tagline and Search, or Tagline you will see another field for setting the tagline, and if you choose Banner, a field for the Banner Code will appear. Both of these fields will be visible at the bottom of the Header Content Theme Options Section when the corresponding option is selected.
The Menu in Header 4 is situated in a bottom section of the Header layout, and is centered by default. There is, however, an option to position the menu alternatively to the left or to the right. This option is found under Avada > Options > Menu> Main Menu Typography > Main Menu Text Align.
See Header 4 in action here!,Header 5Header 5 keeps the three sections of the previous layout, but removes the middle right section, and centers both the Logo and the Menu by default.
The Logo alignment is however configurable by the Avada > Options > Logo > Logo Alignment option, and like Menu Layout 4, the Menu alignment can be configured at Avada > Options > Menu> Main Menu Typography > Main Menu Text Align.,Header 6Header 6 is a fixed responsive layout. It has a centered logo, and a search icon and a mobile menu on the far right. The Search icon can be toggled on or off via the Avada > Options > Menu > Mobile Menu > Display Mobile Menu Search Icon/Field. The Mobile Menu icon triggers a Flyout Menu, which, as noted below, currently only shows parent items. You can configure the Flyout Menu via the Avada > Options > Menu > Flyout Menu options.
IMPORTANT NOTE: With Header 6, it is important to note that it only allows parent level menu items, and so no child levels will display. Mobile Menu Search Icon/Field and Mobile Header Background Color are the only options available for Header Layout 6. The other options are only available when using Header Layouts 1-5 or 7. The rest of the options for Header 6 are on the Flyout Menu and Main Menu tab.See Header 6 in action here!,Header 7Header 7 is the latest addition to the Header Layouts, and is a very minimalist layout. It has a fixed centered logo, with menu items displayed on either side. There are no other specific options for this Header Layout.
See Header 7 in action here!,Mobile Header LayoutsAs Avada is a responsive theme, ALL Header Layouts transform to a Mobile Header Layout, when the size of the viewport reaches the pixel dimensions specified in the Avada > Options > Responsive > Header Responsive Breakpoint are reached. The default value is 800px.
For more information on Mobile Header Layouts and their settings, please read our article on Mobile Menu Settings.

Header Position And Transparency

Avada includes an option to position the header to the top, left or right of your website, and set the main assigned slider position above or below the header. You can also choose to make your main header』s background transparent, or your top header too. All of these options can be selected globally in Fusion Theme Options, or individually per page or post with the Fusion Page Options, which will override the global Fusion Theme Options. For more information on general header set up click here.
Overview
Header Position
Header Transparency OptionsGlobal Desktop Header Background Color And TransparencyGlobal Mobile Header Background Color And TransparencyHeader Transparency Per Page/PostHeader PositionThe Avada > Theme Options > Header > Header Content options allows you to set the header position, header layout and other custom options for your header. Choose between Top, Right, or Left. Continue reading below for an explanation on each position.
Top Position – For Headers set to the top position, you will need to select a Header Layout. You can choose from 6 different layouts. Transparency and slider position will work when using a top header. Read more about Top Headers here.Right/Left Position – For Headers set to either the right or left position, you do not have to select a Header Layout. Every header content option will work with left/right header positions. Transparency and slider position will not work with left/right header. Read more about Side Headers here.Slider Position – You can choose to globally position the main assigned slider either above or below the header in the Fusion Theme Options. The Slider Position option in Fusion Theme Options is only available when the Header is set to the top position. You can also set the slider』s position individually in the Fusion Page Options in each page or post.IMPORTANT NOTE: To have a static Right/Left Header, make sure the content is not higher than your screen size. Otherwise, the header will scroll to ensure that no content is cut off.Header Transparency OptionsBy default, any header layout you choose will have a background color set. Please note that when using top header position and have the opacity set to anything below 1 (0-.9) the header background area height disappears and the slider below it will show behind the header in its place. This option works best with a page slider or large image so it moves up behind the header as illustrated in this demo example. Continue reading below to learn how to change your header』s background color and transparency.
IMPORTANT NOTE: Transparent headers are disabled on all archive pages including search pages because there is not an option to assign a slider or full width container background image to those pages, therefore the page content would be covered up by the header.Global Desktop Header Background Color And TransparencyStep 1 – Navigate to Avada > Theme Options > Header > Header Styling.
Step 2 – Locate the 『Header Background Color』 option.
Step 3 – Click 『Select Color』 button and choose a color from the palette or you can enter the hexcode of your desired color manually.
Step 4 – You can set the opacity of the background color by adjusting the opacity bar on the right. Set it to 0 to make it transparent or to 1 to make it a solid color.
Step 5 – To set the header』s background color and opacity individually per page or post, navigate to the Header tab in Fusion Page Options located on every page or post you create. These options override the global Fusion Theme Options.
IMPORTANT NOTE: Transparency only works with Headers in the top position, and does not work with the right/left positions.Global Mobile Header Background Color And TransparencyStep 1 – If you want to set this globally, navigate to Avada > Theme Options > Menu > Mobile Menu. Or if you want to set this per page or post, go to Fusion Page Options and select the Header tab.
Step 2 – Locate the 『Mobile Header Background Color』 option.
Step 3 – Click 『Select Color』 button and choose a color from the palette or enter the hexcode of your desired color manually.
Step 4 – You can set the opacity of the background color by adjusting the opacity bar on the right. Set it to 0 to make it transparent or to 1 to make it a solid color.
Header Transparency Per Page/PostThe header transparency for desktop and mobile can be set on a page/post by page/post basis, this is set by going to the in-page Fusion Options as illustrated below. Note that the in-page Fusion Options override the Theme Options which are global.