How to Create Your Own Custom Header with Elementor

How to create your own custom header with Elementor

You might already know that Elementor is an amazing WordPress page builder.

It allows non-coder designers like yourself to build 100% custom-designed WordPress pages, exactly as you want them. It’s really visual, and it’s drag-n-drop. It works in the way designers think, with no code required (hurray!)

But if you’re like many designers, once you’ve used Elementor for a while, you might soon find yourself thinking:

“Hmmm… my theme still handles my header – my logo and navigation area. I wonder if I can use Elementor to design my website header as well?”

The good news is… yes, you definitely can use Elementor to build your own custom header. It will completely replace the one that comes with your WordPress theme.

However, there are also a number of different considerations to bear in mind.

In today’s video, I’ll dig right in and show you:

  • Exactly how to build a header template with Elementor.
  • The various tools and plugins available that make building your own headers possible.
  • Step-by-step instructions for adding the header template to your site and replacing your theme’s own header.
  • 5 important considerations or possible trade-offs to bear in mind.

Want to save time? Scroll past the video to grab my one-page Custom Header PDF cheatsheet!

NOTE: If you have Elementor Pro, you don’t need the 3rd party Nav Menu Addon plugin anymore. Pro now comes with a Nav Menu widget of its own.

I love to hear feedback or questions. Let me know what you think in the comments!

Save time! Grab all my Custom Header tips in a handy one-page PDF cheatsheet!

Resources mentioned:

The first 2 links are affiliate links. If you buy the paid version of either, I get a small commission. No extra cost to you. Regardless, I’d 100% recommended both as the only WordPress theme and page builder to use.

Check these posts out too...

60 thoughts on “How to Create Your Own Custom Header with Elementor”

  1. Awesome video, Dave. Actually it was something I was looking for. You made the day!

    Thanks a lot and keep going like this.

  2. Great stuff Dave, really well explained!

    I’ve come to Elementor & GeneratePress via the route of:

    No page builder ->
    Visual Composer ->
    BeaverBuilder ->
    Thrive ->
    Divi ->
    here.

    Glad to say I think I’ve finally (hopefully) found something that I can work with that is fast and reliable. Thanks for your tutorials! I’m still learning, lots of reworking to do…

  3. Excellent tutorial Dave. I am now concetrating on GP pro with Elementor pro. So these are great. I also hear you are fellow northerner ? Ex Salford lass here.

  4. Hi Dave,
    Just finished building my first website but had given up on a problem with site logo on front page. Despite clicking the ‘don’t display’ header & tagline I am left with a big space in front of my content; I think your video has just given me the answer to sorting it out – fingers crossed. I am using Elemate, virtually blank theme. Thank you.

  5. Hi Guys: I’m new here so I want to apologize for all the silly questions I will ask. I think Dave is great and I am so thrilled I found him so I’m ready to learn. So how do I get the pro elementor, I know it’s not free so please point me in the right direction. Thx to all

  6. Hi Dave,
    First, thanks for all of your wonderful videos! I just would like to clarify something: If I use Elementor w/canvas to create a header in a section and then use the navmenu addon for my menu navigation, would that be an acceptable way of creating a diff header for diff pages? You mentioned something about keeping mark-up for header intact, so I just want to make sure I’m doing everything correctly. Thanks much!!

    • Thanks Goldy. I’m always trying to improve my videos, I think this one was the last one before I got myself some proper lights. The lighting is horrible on this one…. 🙂

      I’m using a Logitech C920 webcam. An 18″ ring light, right behind and above my monitor. Shure SM58 mic into a Steinberg UR22ii audio interface. Screenflow records the screen and puts the whole finished vid together. Also use Garageband for the audio and Keynote for slides. Phew!

      Still making it up as I go along and no real clue what I’m doing. But they do get a little bit better each time. 🙂

  7. hi Dave,

    great tutorial, thank you very much. I followed and created a header just the way I wanted, with 2 menus. I get 1 problem though: while creating and editing the header my menus look fine with the submenus showing and everithing, but once saved the submenus don’t show on the site… Have any idea why is that happening?

  8. Hi Dave,
    Thank you for your videos. After almost a year of floundering around trying to figure out how to build a site with zero CSS background, I finally feel like I’ve got a way in to learn while designing a site I can be proud of.

    I have a question: The easiest/safest way to build the header seems to be, a you’ve demonstrated, to inherit the branding logo, header and tagline from the theme, right? But if you go back to the site settings you can’t do bugger all with the heading, tagline and logo. Specifically, I’d like to inherit a *smaller* version of the logo (I solved this by increasing the padding around the column with the logo in it), and change the colour of my tagline (I can’t figure this one out).

    Thanks if you can help!

    • Hi Laura – you should be able to change your tagline color in your theme’s Customizer. Where that is depends on your theme. Your theme might also have logo resizing capabilities in the Customizer too.

  9. Hi there dave

    i am seeing two header (Generate Press Theme)
    1. My custom header (you helped us create it on youtube)
    2. Default (not sure where is it coming from)

    When i delete the second one from Appearance-> customize. it wipes my Custom Header.(The one i really need)

    What do you think i am doing wrong.

    Thanks
    KS

  10. I have created a template and put under GP Hooks. However, I have discovered that the menu is no longer “sticky” and stays on top of the page when I scroll down. How should I configure to let the sticky menu appears again?

  11. Not sure what I’m doing wrong, but I don’t see, “My Library” under Elementor. Also, when I add new or create a template, I am instantly directed to choose a template. If I exit that, select “Elementor Canvas”, click Publish, and then attempt to edit it with Elementor, I get an error message that says, “Sorry, the content area was not found in your page. You must call the_content function in the current template, in order for Elementor to work on this page.”

    I may be doing something wrong? Is the video current to the current version of Elementor? Sorry, what I am missing?

  12. All I want to do is make the font in the WP site menu bigger, and I can’t find a place to do that. I’m using the Ocean theme with Elementor. There are a bazillion ways to change the colors, but none that I can find to enlarge the font.

    (My website isn’t up yet; I’m still gnashing my teeth.)

  13. Hi Dave,
    I love your Elementor videos! Got a question for ya: I want to add an inline script in the to render a Cookie Policy. How can I do this if I am using Elementor Pro 2 and the header is an Elementor Template?
    My first thought is to put it into one of the init hooks, but I wonder if Elementor has it’s own way?

    • Hi Dustin – if you want to add a piece of javascript, it definitely needs to go in a hook provided your theme, into ‘wp_head’. I suppose you could put it in a header Elementor template, but that’s really in the wrong place in the code. If you can put it in the actual of the HTML, with a hook, it’s much better.

  14. Hi Dave,

    I just watched the video again and I think I’m getting it. To answer your question of May 29, I was using Elementor’s Nav Menu, not OceanWP’s, though I think I’ll take a look at the latter.

    Like Toni, above, I don’t see “My Library” in the WP dashboard under Elementor; it goes straight to “Templates.” Perhaps that’s because I downloaded an updated version of Elementor?

  15. sorry is it possible to mention best themes or theme for using elementor page builder pro to create header to footer

  16. Hello Dave, the plugin does not work, I’ve seen the tutorials and I’ve done everything, I use themes like Astra, generatepress, Page Builder Framework, with the free version of Elementor. I created the menu, and when I drag the module to a column and I select the menu and the location does not work, he tried everything. Now I work in local mode. What is the solution please. Thanks!!

  17. Hi Dave,
    Thanks for this tutorial!

    I’m using the free Hiero theme and I can’t work out how to remove the default header and replace it with the one I’ve created in Elementor Pro.
    Can you please advise.
    Thanks

    • If it doesn’t work already, then I don’t think you can, I’m afraid. 🙁 Unless you make a child theme from it and edit the templates manually, to place your header with a shortcode. But that’s no fun!

  18. Thanks a million for the fabulous instructions in ALL your videos!
    I’m using Header Footer Elementor with the GeneratePress theme . I love what I’ve been able to create with this plugin. . however, the navmenu has double down arrows on each tab. It looks awful. Would you happen to know how I can completely delete these? I don’t want arrows at all.

    • Are you using the NavMenu addon to make your menu? Or Elementor Pro’s own Nav Menu plugin? I’m not sure if the former is still supported. If the latter, it’d be best to contact Elementor support, sounds like a bug to me! Hope you can get it sorted.

  19. I just started using NavMenu addon for elementor, but i m stuck with not able to change the font color of menu items,Pls help.

  20. Hi Dave, thanks for this great video, was exactly what I was looking for. Only I can’t seem to getting the same results at all. (I apologise in advance for the possibly silly questions) I am using GP premium theme and have set up the template per the instructions. When I go to Header and Footer builder however I don’t see anywhere that gives me an option to add this template as a header. I don’t understand why this is happening though and not sure where to possibly look for answers. Any suggestions would be great, thank you!

    • Have you already created your header template in Elementor’s library? In that case, create a new template in the Header Footer Builder admin panel. Set it to be the Elementor Canvas. Then ‘edit with Elementor’. Then click the icon to add a template. Then choose the template you already created. That’ll add it to the page. You can then delete the template in Elementor’s library if you like.

  21. Thanks for the helpful video! I was able to build the header and footer, but they are both impacting the layout of the page layout – removing background color/changing font etc. In the header builder it does show “content area” etc which makes me think it is somehow taking some page layout elements with it. Any idea how to fix? If you look at https://redclassic2018.wpengine.com/about/ you can see how the page above was affected when I added the elementor footer. Thank you for any help you can give!

  22. When you’ve made a custom header in Elementor Pro and want to ‘turn it off’ and revert to the Theme header, how can you do it. Clicking on ‘edit in Elementor’ doesn’t seem to give the option, but I’m sure it’s there somewhere. Any advice please? Many thanks.

  23. Taking a quick minute to say that this tutorial was amazing, clear and solved all my problems. Thank you so much, keep up the amazing work

Leave a Comment

Tweet
Share
Share