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.