Blog

How to Design a Custom Header with the Themify Builder

How to Design a Custom Header with the Themify Builder

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

85 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

        • Catrina Corley
          Feb 04, 2019 @ 20:24

          Please put this “import pre-made headers” instruction in the main part of the tutorial and not buried in the comments. It isn’t an obvious step. Thanks.

          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

      • kimwilde
        Dec 06, 2017 @ 16:29

        Yes the import button isn’t working. I was thinking the fault is the browser (Firefox), but when I opened with other browsers (Chrome, IE, Opera), it doesn’t work the same.

        Reply

        • Kurt @ Themify
          Dec 06, 2017 @ 22:13

          Please allow us to look into this issue. Do you mind contacting us here – https://themify.me/contact and please include your site URL? We’ll look into this and provide a fix for you.

          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

  16. Joling
    Nov 30, 2017 @ 20:30

    Hello, I am using the Ultra theme. And I would like to know how to align the phone # to the right on the header. When I add the number in the widget the phone # is right next to the logo which makes it look funny. I would like it to be justified to the right above the social links but on the same row as the logo. Please help if can.

    Thank you for your time.

    Reply

    • Kurt @ Themify
      Dec 04, 2017 @ 20:01

      Please allow to help you with this. Do you mind contacting us here – https://themify.me/contact ? Please include your site URL as well.

      Reply

  17. João Borba
    Jun 13, 2018 @ 11:52

    Please help, when I create the custom header and then hook it, it repeats itself… I end up with 2 copies of the same header instead of just one…

    Reply

    • Nick @ Themify
      Jun 15, 2018 @ 19:45

      Hi,

      In the row’s Additional CSS Class, did you add the ‘regular-header’ in the first row and ‘sticky-header’ in the second row?

      Reply

      • Sara Caliva
        Mar 22, 2019 @ 17:06

        I followed everything exactly and had the same issue. Duplicate header.

        Reply

  18. Eric Valles
    Jun 14, 2018 @ 16:03

    Kurt,

    Was curious if I could add the page title in the header instead of it displaying underneath it?

    Reply

    • Kurt @ Themify
      Jun 15, 2018 @ 18:08

      Please allow us to help you with this. Do you mind contacting us here – https://themify.me/contact ? Thank you for your patience.

      Reply

  19. Carrie
    Jun 20, 2018 @ 19:46

    How do I add one of my menus to the new header? I have tried to download and install the sample headers, but I get stuck in a loop. It won’t import from the main Add New Layout Part page. When I create a new Layout Part, my options only pull from the library. It won’t let me add the downloaded file.

    Reply

    • Nick @ Themify
      Jun 25, 2018 @ 22:07

      To add menu: first create the menu at Appearance > Menus, then drop in the Menu module and select the menu that you’ve created.

      Reply

  20. mehmood
    Jun 28, 2018 @ 15:45

    How do I make the regular header a transparent header? thanks

    Reply

    • Nick @ Themify
      Jun 28, 2018 @ 21:18

      In the regular-header row, if you don’t add any background styling, it should be transparent default.

      Reply

      • mehmood
        Jul 02, 2018 @ 11:05

        in the row options of the menu in the layout parts, the regular header has default back ground styling like fullcover (background mode), scroll and center center (background position) but there isnt a background attached to this. In the sticky header there is a background .png file and that works perfectly when i scroll down.

        The regular header is above the page in a white background. how can i make this regular header transparent so it falls on the page background image.

        Reply

  21. Matt
    Jun 28, 2018 @ 20:20

    By creating my own header layout, will I still be able to retain the features of dropdown menus, etc?

    Reply

    • Nick @ Themify
      Jun 28, 2018 @ 21:17

      You can use the Menu module and it has the mobile menu option.

      Reply

  22. David Paul
    Aug 07, 2018 @ 03:06

    Hello Themify Team!

    I’ve created a two section header layout part, which was pretty easy and painless. But I’m having trouble getting the menu to be responsive and mobile friendly. During preview in mobile view the menu does not shrink down to a mobile menu (hamburger), but instead stays as a regular sized menu. This makes it hard to preview and edit correctly. Has this issue of mobile optimization and preview been addressed in V4 update? I’m not using the newest V4 but the previous one right before. I would love to make some tutorials to help others see the power of Themify’s custom header builder but need to address mobile menu / preview issue first.

    Please let me know, thanks for your help.

    Sincerely,
    David Paul

    Reply

    • Nick @ Themify
      Aug 09, 2018 @ 19:21

      Hi David,

      Please update to the latest V4 because it has many new features and improvements. About the mobile menu concern, on your Menu module, do you have mobile menu enabled and have you entered a mobile menu breakpoint?

      Reply

  23. odae clement
    Aug 31, 2018 @ 13:49

    HOW CAN I ADD A BUY/ADD TO CART BUTON TO HEADER

    Reply

  24. Mark Lee
    Nov 07, 2018 @ 09:52

    I’m struggling to get this working right.

    I’ve created the rows and added the CSS to each row, copied the code for the header and added the hook content.

    I’m getting the regular-header above everything else on my webpage (would like this over the content, not above it)

    And I’m not getting the sticky header at all.

    Ideally, I’d just like the sticky header in the top all the time so it’s always in the same place on the screen.

    Reply

  25. Lex van der Leije
    Aug 29, 2019 @ 16:27

    Thanks for the tutorial! This was pretty easy to accomplish.
    But I would actually like the regular header to stick to the top at all times instead of being replaced by the sticky header row… I tried to use two rows that are exactly the same but then there is still a moment when the regular header scrolls upwards and the sticky header comes in.
    Could you tell me what code to use to have just have one header that sticks to the top at all times?

    Reply

    • Csaba @ Themify
      Aug 29, 2019 @ 20:43

      Hi Lex,

      Please send me a link to your website, so I can check. If the site is not public, please send it via email: https://themify.me/contact – General Inquires

      Reply

  26. Thomas
    Sep 07, 2019 @ 15:32

    The Content if i scroll on page is visible in the custom Header. How do i fix this?

    Reply

    • Csaba @ Themify
      Sep 07, 2019 @ 22:21

      Hi Thomas,

      Please send us a link to your website, so we can check.

      PS. I the website isn’t public yet, please send us the link via email ( General Inquires ): https://themify.me/contact

      Reply

  27. Tony
    Sep 30, 2019 @ 11:36

    How to edit responsive menu?

    Reply

    • Nick @ Themify
      Sep 30, 2019 @ 19:02

      You can style the mobile menu on Menu module > Styling > Mobile Menu.

      FYI: Now you can use Builder Pro to create custom header/footer templates without using Layout Parts. Check it out: https://themify.me/builder-pro

      Reply

  28. Mike Botzan
    Dec 16, 2019 @ 03:31

    I am not able to see the menu on a mobile device. Am I missing a setting?

    Reply

  29. Mike
    Dec 16, 2019 @ 15:04

    When using Builder Pro how do I make the regular & sticky headers if selecting a pre-designed header?

    Reply

    • Csaba @ Themify
      Dec 16, 2019 @ 21:00

      Hi Mike,

      To create a Sticky Header, please check Step 4 from the above tutorial, you should add “sticky-header” as CSS Class to the Row which holds your sticky header and add the code provided at the above mentioned step to Header Code, so you can have a Custom Sticky Header.

      Reply

  30. ALEX MAZUR
    Feb 06, 2020 @ 16:49

    Hi, Can you please tell me how you would change the background color of the nav menu when it is sticky and you are scrolling? I would like it transparent originally, but white or black when scrolling. I don’t suppose there is way to change font color when scrolling as well? Thanks!

    Reply

    • Nick @ Themify
      Feb 07, 2020 @ 03:00

      It is on Step 4 of this tutorial. So you would design 2 rows (one for regular header and another one for sticky header). You would use Builder styling to design both headers.

      At the time of this article, we didn’t have the theme builder. We now have Builder Pro which can help you to design any header templates without using Layout Part or Hook Content. Check it out here: https://themify.me/builder-pro

      Reply

  31. ALEX MAZUR
    Feb 13, 2020 @ 16:34

    Thanks, Nick. I’m sorry, I’m very new to this. I suspected step 4 was what I needed, but it was all a bit like hieroglyphics to me…and step 2 still has me stumped, but I’ll keep working on it.

    I would like to ask about your Builder Pro recommendation though. I am still very confused as to exactly what the difference is between the Premium Theme and Builder Pro. Understandably Builder Pro provides some added functionality…and the Theme comes with pre designed templates to work from. But if I buy Builder Pro, do I really need a premium theme? Will Builder Pro give me all the functionality provided by a premium theme and allow me to design the whole site from scratch? Which despite my beginner status I think I wouod prefer to do.

    Reply

  32. philippenoth
    Feb 21, 2020 @ 11:55

    Dear Themify team,

    I have a site built with the Ultra premium theme. The logo image is currently defined using Themify Options ► Site Logo and Tagline.

    I also have a much broader version of that logo image which extends the mountain ridge to the right : https://www.valaistraductions.ch/wp-content/uploads/2020/02/logo_new2.png

    My idea was to have the logo shown just like now but with the right part (the mountains) displayed below the menus.

    I tried many different things (for example background image in the Header section) but all failed. Could you give me a hint how to best do it ? Thanks a lot !

    Reply

  33. Andrej
    Mar 29, 2020 @ 14:41

    Hello, I am working on my custom menu, and I have a problem with mobile menu.
    Everithing seems to work but when I click on a mobile menu item it displays another menu (probably original one from Ultra default that I have hidden) for a milisecond. After this it goes to requested page, but the experience is not seamless.

    Do you please have any advice how to disable this?

    Thank you

    Reply

  34. Linda
    May 09, 2021 @ 12:10

    Hello dear people at Themify,

    found your theme through Hogan Chua and am so so happy about it. You solved a big problem for me with this tutorial creating my own header. But I still have two questions and I hope you can help me. I build the header and followed all your instructions but have the problem that my header is only displayed on the home/landing page. For all other pages I would have to insert it as a new layout part. How can I display the custom header to all of my pages? I have obviously missed something. My other problem is that I want to change the font size in my drop down containers. Is there a possibility to change the width of the container according to the font size? Everything else works like a charm, so thank you for your beautiful theme (I am using Ultra and these are my first steps in building a website).
    Thank you very very much!

    Reply

    • Nick @ Themify
      May 10, 2021 @ 02:07

      The easiest way now is to use Builder Pro to build the header and use display condition to apply the header template. You can use the Builder to style everything in the header. For more details about Builder Pro, please visit: https://themify.me/builder-pro

      Reply

      • Linda
        May 10, 2021 @ 11:40

        Hi Nick, thank you a lot! I will look into this! Just one last questions for the header. If I want to apply the header to the post page, it just says “Builder is not available on this page.” Is there any way to turn the builder on on this site, too? Thank you a lot, Nick, it’s really really appreciated! :) – Linda

        Reply

        • Nick @ Themify
          May 13, 2021 @ 22:59

          If you see “Builder is not available on this page”, it is probably an archive view (eg. post category or archive view). Try to click on any post and you will see the Builder. If you want to make a custom blog page, create a new page “Blog” and drop in Post module on the page.

          Reply

          • Linda
            May 16, 2021 @ 09:25

            Thank you so much for your help! Your tip creating a custom blog page did the job perfectly, Nick! Your help is so much appreciated, thank you a whole lot!!!! :)

  35. jgroening
    Jul 06, 2021 @ 10:51

    Hi, thank you for the tutorial. Everything works fine except for the transparent header. My regular header has still a white background even if I haven’t changed any background or row settings. It seems that the white header is above the background image of the page.
    How can I make the regular header transparent?
    Thank you – Jenny

    Reply

Leave a Reply to Jonatan Maia Cancel