Global Headers Position And Transparency

Legacy Doc

Last Update: October 1, 2025

When using the Global Options to set a Header in Avada, there are options 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 in the Avada Global Options, or individually per page or post with the Avada Page Options, which will override the Global Options.

Header Position

The Avada > 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.
  • 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.
  • Slider Position – You can choose to globally position the main assigned slider either above or below the header in the Avada Global Options. The Slider Position option in the Avada Options is only available when the Header is set to the top position. You can also set the slider’s position individually in the Avada Page Options in each page or post.
Position & Transparency

Top Header Position

Setting 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 > Global Options > Header > Header Content

  • 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’.

* Remember you can also change the Header Background Image, Header Styling, and Sticky Header options for your chosen header.

Global Options > Header Position

Top Header Content Areas

Avada 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 Styling

For header styling options please go to Avada > Options > Header > Header Styling. You can add a background image to your top header here Avada > 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.

Side Header Position

Setting 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.

  • 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.

Side Header Content Areas

Avada 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 > Content Areas

Side Header Styling

You 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.

Header Transparency Options

By 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 prebuilt example. Continue reading below to learn how to change your header’s background color and transparency.

Header Background Color And Transparency

  • Step 1​​​​​​ – Navigate to Avada > 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 Avada Page Options located on every page or post you create. These options override the Global Options.
Position & Transparency Color

Mobile Header Background Color And Transparency

  • Step 1​​​​​​ – If you want to set this globally, navigate to Avada > Options > Menu > Mobile Menu. Or if you want to set this per page or post, go to Avada 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.

Theme Options Mobile Header Background Color

Header Transparency Per Page/Post

The header transparency for desktop and mobile can be set on a page/post by page/post basis. This is set by going to the Avada Page Options as illustrated below. Note that the Page Options override the Global Options.

Theme Options Mobile Header Background Color

In this article