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.