Blog

How to Design a Custom Header with the Themify Builder

featured image

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

Free Header Designs

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

38 Comments

  1. rup
    Jul 11, 2017 @ 23:15

    This is so great – I would have never thought of using hook content like that. Would love to see you guys post more examples.

    Also, do you think you guys could incorporate a feature of making custom headers an option in the Appearance panel? So that you can build one, then toggle it on and off on specific pages via the header options in the appearance panel.

    Reply

    • Kurt @ Themify
      Jul 13, 2017 @ 14:59

      Thank you for your suggestion :) We’ll discuss this with our team and see what we can do with our future enhancements.

      Reply

  2. Denis Hoffmann
    Jul 12, 2017 @ 07:12

    Hello,
    how do I import the pre designed downloaded “Builder Layout Part”?

    Reply

    • Kurt @ Themify
      Jul 13, 2017 @ 15:02

      Hi Denis,

      You can import the Builder Layout Part by downloading the .zip file on the header that you’d like. Then import it by going to your Wp Admin > Themify theme > Builder Layout Part > Then create a new one and import it from the downloaded file.

      Reply

      • Lianne Won
        Sep 01, 2017 @ 14:41

        When I download the free header, all I get is a txt. document, no zip file. Cannot import. Am I missing something?

        Reply

        • Kurt @ Themify
          Sep 06, 2017 @ 17:06

          Hi Lianne,

          You might be using a Safari browser. Safari has this auto unzip feature when you download a zip file. With that said, please consider to use another browser (ie. Chrome). This will allow you to download the .zip file without auto extracting it.

          Hope this answers your question. If you need any further clarification with anything, please don’t hesitate to reach out to us here – https://themify.me/contact.

          Reply

    • kyle
      Jul 13, 2017 @ 15:36

      I would also like to know how to import?

      Reply

      • Kurt @ Themify
        Jul 13, 2017 @ 23:23

        Hey Kyle,

        You can import the pre-made Header Designs by following the steps below:
        1. Scroll down on the Free Header Design and download the file to the pre-made header design that you’d like
        2. Then go to your Wp Admin > Themify theme > Builder Layout Part
        3. Create a new Builder Layout Part
        4. Then import the file. Here’s a screenshot – https://themify.me/wp-content/uploads/2017/06/import-file.jpg.

        Reply

  3. joseph thiery
    Jul 12, 2017 @ 13:49

    Can’t find a way to import it as well. The import function is only showing what’s already down there and not allowing to import the header file I downloaded from here.

    Reply

    • Kurt @ Themify
      Jul 13, 2017 @ 15:03

      Please allow us to help. Do you mind emailing us with your site URL here – https://themify.me/contact? For now, please make sure you’re using the latest theme version. This will allow us to better provide you support.

      Reply

  4. Jonatan Maia
    Jul 14, 2017 @ 12:40

    Very interesting! Do more tutorials like this, please. :)

    Reply

    • Kurt @ Themify
      Jul 18, 2017 @ 17:41

      You got it ;)

      Reply

  5. Stephanie
    Jul 14, 2017 @ 13:50

    I tried it but failed. Can you get in there and help me, Kurt?

    Reply

    • Kurt @ Themify
      Jul 18, 2017 @ 17:43

      We can definitely help you with this. Do you mind contacting us here – https://themify.me/contact ? Please outline details where you find difficulty and I’ll provide you with some additional support :)

      Reply

  6. syuhada
    Jul 15, 2017 @ 02:33

    where i can find another unique code and the function for this setting?

    Reply

    • Kurt @ Themify
      Jul 18, 2017 @ 17:45

      Not quite sure what you mean. What other unique code are you referring too?

      Reply

  7. laercio civali
    Jul 15, 2017 @ 12:51

    What actually are these header design? These examples seems to be a one page website, is it that? Tks.

    Reply

    • Kurt @ Themify
      Jul 18, 2017 @ 17:45

      The header designs are the top part of the site where you showcase your logo and menu. The one page design is just to show how it’ll look when used on an actually page layout.

      Reply

  8. rumahulin
    Jul 18, 2017 @ 13:41

    how do I import the pre designed downloaded “Builder Layout Part”?

    Reply

    • Kurt @ Themify
      Jul 18, 2017 @ 17:48

      You can do this by downloading first the header design that you’d like to replicate from this post. After doing this go your Wp Admin > Themify Theme > Builder Layout Part > Create new and then scroll down too the Themify Builder option panel and then click import. Import the header file you’ve downloaded here.

      Reply

  9. Raphaël C. Cusson
    Jul 18, 2017 @ 16:30

    You guys just solved a problem I’ve been having for several websites I’ve been working on with custom header layout parts! ❤️

    Reply

  10. Mariana
    Aug 10, 2017 @ 21:01

    Hello, I just need to remove the top line from the header Magazine. How do I do that?

    Reply

  11. Lisa
    Aug 14, 2017 @ 14:29

    hey guys, how do I deinstall this header design again, to get back my original one
    -thank`s

    Reply

    • Nick @ Themify
      Aug 14, 2017 @ 17:46

      Hi Lisa,

      You would remove the Hook Content and then go to Themify > Settings > Theme Settings > Theme Appearance, select a header layout that you like.

      Reply

  12. Laura K.
    Aug 14, 2017 @ 17:55

    Being able to design a custom header is amazing! I used one of the free header designs and then customized it to my liking. The only problem is when I checked it on my phone, it’s not responsive. Is there a solution for this?

    Reply

    • Nick @ Themify
      Aug 15, 2017 @ 18:51

      Which header are you using? We will check the responsive styling.

      Reply

      • Laura K.
        Aug 16, 2017 @ 19:59

        I started with Top Bar and then customized it to my preferences.

        Reply

      • Laura K.
        Aug 22, 2017 @ 00:15

        Any luck figuring out why it’s not responsive??

        Reply

      • Laura K.
        Aug 28, 2017 @ 22:21

        Nick @ Themify, Can you please update me on the responsiveness of the headers? Or do I have to open an issue in Support to get this resolved? Thank you!

        Reply

        • Megan Bailey
          Sep 05, 2017 @ 17:19

          I hope they respond soon. I am having a similar issue on a client’s website. The custom header is extremely helpful but I really need the hamburger menu to appear on mobile. I have it set to not show the menu on mobile but need the mobile menu to pop up. HELP!!

          Reply

          • Megan Bailey
            Sep 05, 2017 @ 17:24

            I found it! There is a mobile menu checkbox when you are editing the menu. @Laura K, check that and you should have it fixed.

  13. Ocram
    Aug 16, 2017 @ 12:29

    Thanks very much! This inspire me a lot. Can you also show us how to make a two row menu ? Like main menu and top menu in the header ?

    Reply

    • Kurt @ Themify
      Aug 21, 2017 @ 15:54

      Please allow us to help you with this. Do you mind contacting us here https://themify.me/contact and we’ll provide you with more info?

      Reply

    • Mohit Nimavat
      Sep 28, 2017 @ 08:40

      Hi Megan where exactly is the mobile menu check box ? I am trying to have the hamburger menu for my mobile version as well. Thanks in advance :)

      Reply

  14. Nosa
    Oct 16, 2017 @ 11:25

    I will like to see a bookstore theme developed by themify

    Reply

  15. Piotr Dziankowski
    Nov 09, 2017 @ 22:53

    Hi.
    I have a problem. Sticky-header does not work. I don’t know, why…

    Reply

    • Kurt @ Themify
      Nov 10, 2017 @ 17:50

      Hi Piotr,

      Please allow us to help you with this. Do you mind opening a new ticket on our support forum so that one of our developers can help you with this issue? Please include your site URL as well so that our developers can further investigate the issue.

      Reply

Reply