Sticky Header Setup

Sticky Header Setup

08/06/2018

In addition to a choice of header layouts, Avada also has a sticky header option. For improved usability, as the user scrolls down a page, the sticky header activates ensuring the website's main menu is always accessible. To manage the sticky header, Avada includes several options for styling, as well as visibility options to enable or disable it on various screen sizes.

How To Setup The Sticky Header

Step 1 - Navigate to Avada > Theme Options > Header > Sticky Header.

Step 2 - To enable/disable the Sticky Header, find the 'Sticky Header' option and set it to On or Off.

Step 3 - On this tab are also options to enable/disable the sticky header on tablets or mobile devices.

Step 4 - Customize your sticky header's appearance using the available options.

Step 5 - Click the 'Save Changes' button.

Sticky Header Logo - Upload a custom logo unique to the sticky header. You can do this in the Avada > Theme Options > Logo > Sticky header Logo tab.

Sticky Header Custom Menu - You can add a custom menu unique to the sticky header in the Appearance > Menus panel in the WP admin panel. Create a new menu and assign it to the sticky header by checking the 'Sticky Header Navigation' checkbox under the Menu Settings or go to 'Manage Locations' tab, and set a menu for the 'Sticky Header Navigation' option.

Sticky Header Transition - The Sticky Header never leaves the viewport. When you scroll down, the Sticky Header "sticks" to the top of the window and depending on the header layout you've set, the sticky header will display different elements of your header as you scroll down the page.

Important Sticky Header Information

Sticky Header with Header Layouts #1 & #6

Header layouts #1 and #6 are straight forward in layout; logo to the left and menu items on the same row, to the right. Only the logo and main menu will be displayed in the sticky header as you scroll down the page.

Sticky Header with Header Layouts #2 & #3

Header layouts #2 and #3 include a top secondary header with your logo and main menu items on a row below that. Only the logo and main menu will be displayed in the sticky header as you scroll down the page, and not the top secondary header.

Sticky Header with Header Layouts #4 & #5

Header layouts #4 & #5 includes a top secondary header, logo, and menu which are all on different rows. By default, only the logo and menu will be displayed in the sticky header as you scroll down the page. You can change what displays with the 'Sticky Header Display For Headers 4 - 5' option. Choose 'Menu Only' or 'Menu + Logo Area'

Sticky Header Theme Options

Below is a list of all the available theme options for the Sticky Header. These options are located in Avada > Theme Options > Header > Sticky Header. Certain options are dependent, and will only be visible when specific options or header layouts are enabled.

Sticky Header - Illustrated as A. Turn sticky header On or Off.

Sticky Header on Tablets - Illustrated as B. Turn sticky header on tablets On or Off.

Sticky Header on Mobiles - Illustrated as C. Turn sticky header on mobile On or Off.

Sticky Header Animation - Illustrated as D. Turn on to allow the sticky header to animate to a smaller height when activated. Note: Only visible when header layout #1, #2, #3 or #6 is enabled.

Sticky Header Display For Headers 4-5 - Illustrated as E. Controls what displays on the sticky header when using header layouts #4 or #5. Note: Only visible when header layout #4 or #5 is enabled.

Sticky Header Background Color - Illustrated as F. Choose a background color for the sticky header.

Sticky Header Menu Font Color - Illustrated as G. Controls the color for main menu text in the sticky header.

Sticky Header Menu Item Padding - Illustrated as H. Controls the space between each menu item in the sticky header, in pixels (0px-200px).

Sticky Header Navigation Font Size - Illustrated as I. Controls the font size of the menu items in the sticky header. Enter value including CSS unit (px, em, rem), for example: 13px

Recent Posts

Recent Tweets

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