Position & Transparency

Position & Transparency

17/07/2018

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.

Read Our Main Header Setup Article

Header Position

The 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

    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 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, therefor the page content would be covered up by the header.

    How To Set Header's Background Color And Transparency

    Step 1 - Navigate to Avada > Theme Options > Header > Header Styling

    Step 2 - Locate the Header Background Color option

    Step 3 - Click the '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.

    Recent Posts

    Recent Tweets

    For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
    I Accept