Top Header Position

10/21/2016
IMPORTANT NOTE – The top header layout #6 is only available in Avada version 4.0 or higher.

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.

Click Here To Read Our Main Header Setup Article

Top Header Position Setup

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 > 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 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 > 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 Layouts

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

IMPORTANT NOTE – The header padding and logo margin options will auto adjust based on your selection for ideal aesthetics.
Top Header Layout #1

This layout includes your main menu items and your logo.

Top Header Layout #2

This 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 #3

This 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 #4

This 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 #5

This 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 #6

This 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 #7

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

14 Likes
Proudly Serving Over 390000 Satisfied Users!