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.

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.

Sorry the free cheatsheet I mention in the video is no longer available.

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

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

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

    • Hi Dave,

      Been watching many of your videos now and created my first website using Elementor Pro and Astra Pro.

      I’m starting my second website but I’m just wondering as I’m still learning is it better to create the header especially with Astra Pro or Elementor Pro?

      I can create the header with Elementor Pro but having a little trouble with the ‘Button’ element at the end of my menu…

      I’ve basically added a ‘Button’ at the end of the menu on the desktop saying CONTACT but on the mobile Preview, I want the word CONTACT to display in the Toggle drop down? I can’t seem to find how to do this?

      Please can you advise and it’s driving me bonkers!

      Many thanks in advance!

  1. Great stuff Dave, really well explained!

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

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

    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…

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

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

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

  5. 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. 🙂

  6. 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?

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

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


  9. 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?

  10. 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?

  11. 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.)

  12. 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. Reply
  13. 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?

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

  15. 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!!

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

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

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

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

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

  20. 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 you can see how the page above was affected when I added the elementor footer. Thank you for any help you can give!

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

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

  23. Hi Dave,
    I am not able to change the header of 2018 by-default theme. Please guide me how to do that ?
    In every video they say that how to make it but no one tell that how to replace it.

  24. Great tutorial!

    I have an issue, i am not able to get the content to “slide up” under the header so i get the transparent header effect. It creates a header above my content.

    When i follow your tutorial i use the Astra theme(free) and all the free versions of Elementor and plugins.

  25. Hey Dave!
    I was wondering how to use the header created. I’ve created it and saved it as a template. Do I just insert that particular section at the beginning of each page that I make?

  26. Seems like newer versions of Elementor does not provide the Theme builder in the free version 🙁

    I can’t find the “my Library” section and anything related to Theme Builder asks me to “go pro”

    Am I right or doing something wrong here?

    • This video was made before the Pro theme builder came out. Now you want to be in the Templates folder (it’s directly below the Elementor menu item in your WordPress admin menu). Then Saved Templates.

  27. Excellent tutorial 😉
    I use Elementor / OceanWP to create a header an use the navmenu addon for my menu navigation, but how do I remove blue background on menu item?

  28. Hie. I followed your tutorial and made my custom header. I Am using elementor and ocean wp but I hit a road bump because I would like to make the custom header I have made transparent but I can’t now because once you choose the custom header choice in the customizer under header you can’t choose the transparent choice as well. Please help me,I want it too look something like what you created with the overlay and it being transparent.

  29. Man you are a genus. I have come across some of your tutorials and you really know how to express and identify possible challenges. Thanks a million Dave

  30. Hi Dave.

    I think your philosophy to use as much native WordPress functionality is a good one and one I share. The more variables you add into the mix the higher the probability of failure, the harder it is to diagnose, and the more difficult (maybe even temporary) the fix.

    Oh, and fabulous videos. As a wise person once said, giving someone else your time is indeed a precious gift.



  31. Great work.Thank you for sharing your knowledge.When you deleted the logo then added branding into second column how did the logo appeared itself but in my case it says “Your theme must declare the “add_theme_support( ‘custom-logo’)” for the logo to work”.
    Kindly explain if possible.

  32. Hi Dave,

    Great video, but I have not been able to install my custom header that I created using Elementor with NavMenu Addon Plugin. I saved it as a template. I’m using Ocean WP. When I go to Customise-> Header and choose Custom header, there is no option to select a template from the ‘Select template’ dropdown box.

  33. Hi Dave, when I add the primary menu to the inner section, the menu items are getting shown.
    I’m using Navmenu addon and my theme is storefront. Pls advise.

  34. Thanks for this.

    Unfortunately it is only compatible with 5 themes (Astra, GP, Genesis, OceanWP, Beaver) so of little general use. Perhaps you should state this at the outset. I was hoping to use it with a simple blog theme but I have yet to find one that is compatible.

    Or am I missing something?

  35. Hello Sir. Thank you very much for your interesting tutorials. I have followed all the tips that you provide in order to customize a header with elementor. I had succeeded some three month ago on one of my websites using footer-header elementor plugin. However, when I tried on a new one yesterday and today; I failed! It looks as if it is no longer working with the free astra theme. Do you have an idea about it? In other words, does the header footer & blocks still work on astra free theme? If yes, can you please provide your kind help?

    Best regards and happy new year.


  36. I have used NavMenu Addon to build my header in Elementor and there’s an issue with hamburger menu on mobile. There is no icon on the toggle button, it’s just an orange square. In Elementor I set white as color of the icon but it didn ‘work. I’ve been looking for a solution on internet, unfortunately without any result. So what to do?


Leave a comment