Free StuffTutorials

10 Jul 2017

How to Design a Custom Header with the Themify Builder

Free Stuff, Tutorials / 19 Comments

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.

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 2:

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

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.

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

Step 4 (Optional): Sticky Header

You can also make your header design sticky by adding CSS class "sticky-header" on the row options. The row that you add this CSS class too will only appear when you scroll through your site. Recommended way to add this:

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

   
   <style>
   body:not(.themify_builder_active) .themify_builder_row.sticky-header {
   	position: fixed;
   	top: -100%;
   	opacity: 0;
   	transition: all 1s;
   	z-index: 9999;
   }
   body:not(.themify_builder_active).builder_sticky_header .themify_builder_row.sticky-header {
   	opacity: 1;
   	top: 0;
   }
   </style>
   <script>
   jQuery(function($){
   	var body = $( 'body' ),
   		header = $( '.themify_builder_row.regular-header' );
   	$(window).on( 'scroll touchstart.touchScroll touchmove.touchScroll', function(){
   		if ( $(window).scrollTop() <= header.outerHeight() ) {
   			body.removeClass( 'builder_sticky_header' );
   		} else {
   			body.addClass( 'builder_sticky_header' );
   		}
   	} ).trigger( 'scroll' );
   });
   </script>
   

2. Edit the Builder layout part
3. Create a new sticky header row and add "sticky-header" on the Additional CSS Class field

Free Header Designs

You can import these header designs by clicking on the Import icon and select "Import from File" (screenshot)

• 
  Header Design: Fullheight
  Demo | Download
• 
  Header Design: Top Bar
  Demo | Download
• 
  Header Design: Product
  Demo | Download
• 
  Header Design: Simple
  Demo | Download
• 
  Header Design: Social [
  Demo | Download

Read More