Header Layouts

Fifth avenue comes with various predefined header layouts. Choose layouts and adjust elements position. Drag and drop elements from disabled block to the left or right header section.

Some layouts have only one header section (left of right) and some both. Two squares on layout image means it is area for elements. For example first layout has only right header section for elements. Big block means logo and dashes menu. Some layouts may have two menu areas (left and right).

Items position in list affect their order in header. First items in list will be shown first (from left to right) in header.

Header Elements Options

Header Text Area – here you can place any content for header i.e. a button or a phone number. Then drag & drop  Text area 1 or 2 element to the desired header section.

Mini cart style – you can show WooCommerce mini cart in header as drop down or off-canvas menu (slideout). You can add a short text that will be place at the top of the cart drop down or slideout.

Slideout or Burder menu – it is additional menu area that appears when you click or hover on 3 lines icon in header. Slideout menu will appear from the left if icon in the left header section and from the right if icon in the right side of the header.

Burger menu button text – You can add text near (to the right) the burger menu icon.

Also you can add any content at the bottom of slideout menu by adding it to Burger Menu Additional Content textarea.

Header Login Style – You can allow users to login without leaving page by enabling the fullscreen overlay with login form.

Search Input Style – Search icon can open fullscreen modal or a slideout from the top with search form.

If you set fullscreen search modal then you can also choose specific product category for search.

Header Search Post Type – You can choose where to search in products only or on page and posts also.

Show search slideout on Hover or Click – Same as slideout menu search slideout can appear on click or hover.

Cart Icon Text with Bg will place cart counter text in circle.

Header Styling

Some of the header appearance options can be found in 5th Avenue options panel Header – General Header Options

Here you can place header above content and passepartout frame, make it full width and adjust height and spacing between items.

But the most of the appearance settings can be found in Appearance – Customize – Header

Here you have full control over the header colors and style separately for main header, mobile, sticky, menus and so on.

You can choose from various menu hover styles in Appearance – Customize – Header – Menu Styles

Simple color hover, strike-through or different underline animations.

You can also enable arrow that will be shown next to the menu item if there is a submenu.