When building a Header Layout Section, there are Layout Section options, in the place you’d normally find Page Options. Here, you can generate your Dynamic Content Previews, and now, as can be seen in the screenshot above, you can set the Header position.

So to create a Side header, all you need to do is to set this position to the Left, or the Right, as you prefer. Then it’s simply a matter of building a Header in the same way as you normally would.

There is an option for the Header Background Color, and an option to set the width of the side header, and the Side Header breakpoint (the size screen it reverts to being a top header).

Then it’s simply a matter of building your Header. You can use the same Elements, like an Image Element for the logo, and the Menu Element. That Element also has a Vertical Direction option that works with the side header.

As you can see in the screenshot below, our finished header looks great, and in this case, reverts to a Top Header on Medium Screens. Try it out live on the Resume Prebuilt Website.

In this scenario, we’re going to recreate the Header of the Online Tutor Prebuilt Website in Avada Layouts. As you can see below, the site header has two containers; the orange top bar, with contact information and social links, and the second container with the logo and the menu. It is this second container we want to be transparent, so that the background image of the top page content container moves up underneath the header.

OK, so I’ve started by creating the Header Layout Section. As you can see in the back-end builder view, there are two containers, with two Elements in each.

OK, here’s our site with the new Header Layout Section activated. Identical to the original site.

You can also enable any level of transparency for sticky headers, either independently, or in conjunction with the above initial Header.

On the front end, as you scroll, the top bar disappears, but the second header container becomes sticky, and semi-transparent, with the content sliding in behind it as you scroll.

You might also want something a bit more complex. You can also apply any level of transparency to your Header Container Background, or as in the example here, set a gradient background with varying levels of opacity.

As a result, the second container in the header has an almost solid white at the top of the header, quickly graduating to fully transparent. You can adjust where the opacity starts and ends, and how smoothly it graduates, with the Gradient Start and End Position.

OK, that’s it. There are many ways you can use transparency in your Header Layouts, but this should give you the tools to achieve pretty much any header effect you are thinking of.

If you want a Header that just reverts to a Mobile Menu (Hamburger Menu) when the site is viewed on a small screen, then you only need to change one very simple setting. This is found in the Menu Element, in the Mobile tab. It is the Collapse to Mobile Breakpoint option. This is, of course, the breakpoint at which your navigation will collapse to mobile mode. There are five options – Never, Small Screen, Medium Screen, Large Screen, and Custom.

For a typical Mobile only menu, just set the Collapse to Mobile Breakpoint option to Small Screen. If you wish, you can customize the pixel value of that breakpoint in the Global Options, under Avada > Global Options > Responsive > Element Responsive Breakpoints, as you can see in the image below. You also have full control over what icons are used with the Mobile Menu with the Mobile Menu Trigger Expand Icon and Mobile Menu Trigger Collapse Icon options, which you will find on the Mobile tab of the Menu Element.

If you want to create a specific Mobile Only Container in your Header Layout, by using the Container Visibility options, there is also a useful option in the Image Element. This allows you to only pull a Mobile Logo into the Element via the Dynamic Source option. To do this, click on the Dynamic Data icon (next to the Element title), select Logo as the Dynamic Content, and then you can choose from Mobile (Normal) or Mobile (Retina). If selecting Retina, you can then also use the Image Max Width Option below to set the logo to half of its full size, thereby creating a Retina Ready Logo.

You might also want to create a Mobile menu that’s visible on all devices. This is also easy to do with the combined forces of the Menu Element and the menu itself.

The first step is to add a Custom Home Link (#) as the top level menu item in your menu, and make all desired submenu pages as children of that top level item, as seen below. In this example, I have also added two more Icon Only menu items below the submenu items, both from the Avada Special Menu Items – a Search icon, and a WooCommerce Cart Icon.

It’s also important to change the top level menu item to Icon Only through the Avada Menu Options. Here, you can set the icon to a Hamburger menu, or whatever you prefer.

Then the Menu Element takes over. Here you select your Menu, and then you can customize it as you wish. You can control the Icon size, the item spacing and styling, the submenu mode, and many other things.

Here you can see an example of this method, using the Avada Food website. In this example, I set the Submenu Mode to Dropdown, and set the Space Between Main Menu and Submenu to be 50px.

This menu then looks the same at all screen sizes, from Desktop, through tablet to mobile.

Another couple of very helpful tools when designing Mobile and Sticky Header Layouts, are the Element Visibility Options, and the new Element Sticky Visibility Options. The Element Viability Options are found on all Elements and can be used, for example, to hide a Container until the Screen size is Small. In this way, you can easily have individual Containers for various screen sizes.

The new Element Sticky Visibility options are found on Columns and a selected range of other Elements, and can be used to hide Elements in certain states. For example, you can add Elements into a Column, which is then visible only when the Container is in Sticky mode. For more information on these two, very useful helper options, please see the Avada’s Visibility System and the How To Work With Sticky Containers docs.

The first step, before using the Menu Element, is to have an existing menu. Menus are core WordPress business, and are created under Appearance > Menus, from the WordPress dashboard. See our Setting Up A Menu doc, or the WordPress Menu User Guide on the WordPress Codex for detailed information on this step.

The Menu Element then controls how the menu displays, but there also some options to be aware of in the Menu itself, that affect the menu’s appearance.

When creating your menu in WordPress, there are several options with the menu and the menu items that will affect how the menu will display on the page, whether assigned via the WordPress Menu Options, or displayed using the Menu Element.

Please review the Menu Settings doc for a full rundown of what you can configure while building a menu, but these primarily include the Avada Menu Options, found in every menu item, and the Avada Special Menu Items, found at the bottom left of the menu area.

For example, with the Avada Menu Options, you can style a menu item as a button, add an icon or show the menu item only as an icon, add a Menu Highlight Label, or enable a Mega Menu on the item. All of these options would affect how the menu displayed when using the Menu Element, and as such, the styling for such aspects of the menu items would come from the Menu itself, and not the Menu Element.

And with the Avada Special Menu Items, this is where you would add things like WooCommerce iconized menus, Search bars and Sliding Bar Toggles, if wanting to use a menu with the Menu Element.

To see details of each specific Special Menu Item, head to the Avada Special Menu Items doc. When assigning Menus via WordPress, these options are added via the Global Options, but when using the Menu Element, these special items need to be added to the menu itself for them to appear. These are the WooCommerce Cart, the WooCommerce My Account, Search functionality, and the Sliding Bar Toggle.

Each of these Special Items has their own Avada Menu Options panel, and can be added to menus by themselves or with other menu items.

One is the use of carets. If Click Mode is activated, and Dropdown Carets are enabled, then it is the Carets themselves that need to be clicked to activate the submenu, not the menu item.

This is related to the second issue; the top level menu items. These can be normal page or post links etc, but in this case, clicking on them would redirect the page to the link, and not open the submenu.

So, to avoid these issues when creating a Click Mode Menu, it is best to use custom links set to # as the top level menu item, when a submenu exists, so that if a user clicks on the actual menu item, the submenu will open.

A Custom Header is technically a Layout SectionLayout. See Introducing Layouts in Avada for a general overview of Layouts, and Understanding Layout and Layout Sections to understand the difference between the two parts of the Layout, but for now, let’s now look at creating a Custom Header Layout Section.

You can find Layouts at Avada > Layouts. This interface is where you create and manage your Layouts and Layout Sections in Avada. Initially, there is just a Global Layout, and by default, this is empty, with no attached Layout Sections, as can be seen below.

You can add a Header Layout Section to the Global Layout, or to a Conditional Layout, set to only show on specific custom post types, or even single pages etc. The Global Layout is already there by default, but for a Conditional Layout, we have to first create a Layout.

Creating a Layout is done on the Layouts page, by simply adding an appropriate name and then clicking on Create New Layout, as can be seen below.

If you already have a Layout you want to add a Custom Header Layout Section to, or you want to add it to the Global Layout, then you can go ahead and create a Header Layout Section.

You can do this on the Layout Section Builder page, by simply choosing the type of Layout Section, and then adding a name (in this case, Header, and perhaps a name of Global Header might be most appropriate) and then clicking on Create New Layout Section, as can be seen below.

Alternatively, you can create a Layout Section directly from the Layout you wish to add it to, as can be seen below. For a Layout Section to appear on your site, it has to be added to a Layout. And as mentioned, there is initially only a Global Layout. So, if you wanted to create a Global Custom Header, you would just add it to this Layout. But if you wanted a conditional Custom Header, you would need to create a new Layout, assign a Custom Header Layout Section to it, and then add conditions to it to get the Layout to display according to those conditions.

There’s no wrong way to do this, but it’s important to think of the circumstances. If the layout is already active (i.e. it has conditions or is the Global Layout) then any Layout Section added would also be immediately active, and at this point would still be empty. So in the example of adding a Custom header to a Global Layout, it would make more sense to add it via the Layout Section Builder page first and build it before adding it to the Global Layout.

Alternatively, if we were adding a Header Layout Section to A Conditional Layout, then we could add it in this way, and then build it. Conditional Layouts are not in use until there are conditions added. If we mouse over the Header Layout Section on the Layout, as shown below, we can then click on the edit icon to design and build our Layout Section.

When you first edit a new Layout Section, you come to the default WordPress Editor. From here, you can choose to use Avada Builder, or Avada Live. It is here we create our Custom Layout Sections.

Anything you can build in the Avada Builder can constitute the content of your Layout Sections. You can have multiple columns, background images, dynamic data… anything. The freedom this gives is enormous. The Layout Section is literally that – a section where can create the Layout. The content itself comes from the Builder, and what you can do is only limited by your imagination.

With a Global Layout, there are no Conditions. This is because it’s global, and any Layout Sections added to it will be used on every page. If, however, you wanted a Custom Header just on some pages of your site, you’d need to add a Header Layout Section to a Conditional Layout.

With any Conditional Layout, you need to set the conditions of the layout. This is best done last, because as soon as you set the conditions, the layout is active, and if you do this after first creating the Layout Section, but before editing it, the pages displayed that fit the conditions would be empty in those sections.

To add a condition, or conditions, simply mouse over the bottom of the Layout, and choose Add A Condition. This brings up the Layout Conditions Dialog. Please see Understanding Conditional Layouts for more information on Conditional Layouts.

In the example of the Pet Supplies Website, there is also a Conditional Custom Header, which only displays on one page, the Alternate Home Page. See below for the Conditions set to achieve that, and further below for an example of what that Header looks like on the Alternative Home page.

With Avada Layouts, creating a Custom Header is an unlimited possibility. Not only can you use the full power of Avada Builder to create almost any Header you can conceive of, and thanks to the power of Conditional Layouts, you can also show, or hide, the Header on any page, category, custom post type, or any combination of conditions you can think of. And with Avada Studio, adding a new Header is as easy as it gets.

Avada Layouts is a game changer in the true sense of the word. It enables such freedom of design, and gives such flexibility in deployment, that building Headers will simply never be the same again.

In an Avada Layout Section, the Background Parallax options are found on the Container, Background > Images tab. When you add an image, you get a Background Parallax option. There are six options to choose from, including the default No Parallax. The others are Fixed, Up, Down, Left, and Right. Depending on your choice, you may see further options below, to control the speed and whether it’s enbabled on mobile etc.

For Global Option headers, there is a single, and simple, option for setting parallax scrolling on the header background image. This causes the header background image to be fixed, and so it doesn’t move with the header when you scroll.

This is found under Avada > Options > Header > Header Background Image, and the parallax option will show when an image is selected as the header background. Set Parallax Background Image to On to use a parallax scrolling effect on the background image. There is also an option for 100% Background Image, to have the header background image display at 100% in width and height according to the window size, and another option to control any repeating of the background image.

This setting only works for the top header position. For top headers, the image displays on top of the header background color and will only display if the Header Background Color is fully opaque (i.e. it is a hexadecimal value, as opposed to an rgba value with transparency – eg. rgba(255,255,255,0.75)).