Global Headers Position And Transparency

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.

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.

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.

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.

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.

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.

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.