Take full creative control with your site using Themify Builder - starting with your header! We understand the need to create unique sites that showcase your brand. Whether it's with the post/page layouts, color scheme, or even the fonts used - every little detail counts when making your site stand-out from the competition. Which is why we've created this tutorial to showcase how you can create your own custom header design using the Themify Builder.

Note: This tutorial is only applicable with the Ultra or Shoppe theme.

UPDATE: Now you can build custom header, footer, and post/page templates with Builder Pro. With Builder Pro, you can build custom templates and assign display conditions where the templates should be used.

Let's Get Started

Before you start, make sure Ultra or Shoppe theme is activated on the site.

Step 1:

  • Go to your Themify theme > Builder Layout Part
  • Create a new Builder Layout Part
  • Copy the layout part shortcode

step 1

Step 2:

  • Go to your Themify Settings > Theme Settings >Theme Appearance
  • Select "No Header"

step 2

Step 3:

  • Go to your Themify Settings > Hook Content
  • Add a new hook content in "body_start"
  • Insert the layout part shortcode (the header layout created in step 1). This will insert the header layout part in the header area.
    • Optional: Add a condition to set which page you would like to use this header only. You can do this by clicking the "+condition" option.

step 3

That's it! 3 simple steps to create your own custom header!

Step 4 (Optional): Sticky Header

The following steps will show you how to create a sticky header using two Builder rows.

  1. Go to Themify > Settings > General, add the following code in Header Code:

    
<style type="text/css">
body:not(.themify_builder_active) .themify_builder_row.sticky-header {
	position: fixed;
	top: -100%;
	opacity: 0;
	transition: all 1s;
	z-index: 100;
}
body:not(.themify_builder_active).builder_sticky_header .themify_builder_row.sticky-header {
	opacity: 1;
	top: 0;
}
</style>
<script type="text/javascript" defer>
document.addEventListener( 'DOMContentLoaded', function () {
	var body = jQuery( 'body' ),
		header = jQuery( '.themify_builder_row.regular-header' ); // element that when we scroll past it, should trigger the fixed header

	function themify_header_custom_scroll(){
		if ( jQuery(window).scrollTop() <= header.outerHeight() ) {
			body.removeClass( 'builder_sticky_header' );
		} else {
			body.addClass( 'builder_sticky_header' );
		}
	}
	if ( header.length > 0 ) {
		themify_header_custom_scroll();
		jQuery(window).on( 'scroll touchstart.touchScroll touchmove.touchScroll', themify_header_custom_scroll );
	}

});
</script>
  2. Edit the Builder Layout Part. Create 2 rows of your desired design (ie. the first row is the regular header and the second row would be the sticky header)
  3. On the first row, add "regular-header" in the Additional CSS Class field
  4. On the second row and add "sticky-header" in the Additional CSS Class field

Optional step 4