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.

5 Free Header Designs

We wanted to get you started right away, so in addition to the tutorial, as a special treat, we've created 5 free header designs that you can import. You can view and download these demo layouts below.

Requirements:

  • Ultra or Shoppe theme activated on user site

Now let's get started!

Step 1:

  • Go to your Themify theme > Builder Layout Part
  • Create a new Builder Layout Part or download one of our free header design here
  • 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