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.
I love to hear feedback or questions. Let me know what you think in the comments!
Resources mentioned:
- GeneratePress
- Elementor
- OceanWP
- My Custom Footer video
- My Nested Sections video
- NavMenu Addon plugin
- GeneratePress nav menu shortcode plugin (Lyle Chamney from SniffleValve)
- Header Footer Elementor plugin
- AnyWhere Elementor plugin (free)
- AnyWhere Elementor Pro plugin (paid)
- GP Extender
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.
Absolutely brilliant video tutorial, Dave. Thank you!
Thank you so much Donna. I hugely appreciate the support and encouragement, it means a lot. Glad you liked it!
Great video, Dave. Always learn something when I come here and I know almost everything there is to know (joke).
Keep smashin’ it.
Ha! That made me actually LOL. Thanks Lewis. Appreciate the comment. 🙂
Awesome video, Dave. Actually it was something I was looking for. You made the day!
Thanks a lot and keep going like this.
That’s awesome Nacho! Glad to have helped man. 🙂
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!
Shaun
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…
Glad to help Simon. And thanks for the comment. Very much appreciated!
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.
Cheers Lisa! Yep, I’m from Preston originally. Seems like a long time ago now though! I don’t miss the rain. 😉 Thanks for the comment.
Fantastic… i was looking for something like this for a long time!!!!
Thank you very very much!
You’re very very welcome!
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.
Hi Sarah. Good to hear from you! I’ve emailed you a quick video showing you what I think’s happening. Hope it helps a bit. 🙂
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
Hi Peggy – just go to the Elementor site to buy. That link is an affiliate link, meaning if you buy I get a small commission. If you prefer, you can go direct: https://elementor.com/pro/
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!!
Hi Shala. Thanks for your kind words! That’s definitely an acceptable way of having a different header, yes. 🙂
Hi Dave – thanks for another good tutorial.
curious to see how did you setup your desk, especially the camera:)
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. 🙂
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?
Is this using Elementor’s new Nav Menu widget, Aldin? If so, I think you’d have to contact Elementor support about this one. Let me know.
ok, I’ll check it out, thanks
Hey can you tell me how to do this with a sticky header both logged in and not?
Hi Kali. You’d need to use a sticky header plugin, like https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/ – one of the disadvantages of not using your theme’s header. 🙂
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.
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
What method did you use to replace the GP header with the Elementor one?
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?
That’s right, it won’t. You’ve bypassed GP’s menu so you’ve also bypassed its settings.
You could try this plugin: https://wordpress.org/plugins/mystickymenu/
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?
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.)
Are you using your theme’s nav menu (in OceanWP), or Elementor’s Nav Menu widget?
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.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?
sorry is it possible to mention best themes or theme for using elementor page builder pro to create header to footer
Thanx for the help mate. .
You’re very welcome.
Hi Dave, Amazing tutorial. Please advise how to add the header on a Hestia theme?
Did you ever figure this out?
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!!
Hey Javi – do you mean the nav menu addon plugin? It might be that it doesn’t work anymore? Best to contact the developer for support.
You can also use the Nav Menu widget if you have Elementor Pro.
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!
Thnks a lot, usefull
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.
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.
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.
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!
How have you added the header and footer, Amber? Is it with the Header Footer Builder plugin?
Please make a new video how to do it with the current elementor pro and GP cuz it’s a lot different now and annoying.
Yep I will do at some point.
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.
Hey Pat – it depends on how you added the custom header. Can you let me know?
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
How i intergration elementor with theme flatsome i want to use header and footer of flatsome
Best Regards
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.
You can’t replace the header in the WP 2018 theme. It doesn’t have the hooks available to do it.
Hi Dave, this is excellent. Elementor is really a good plugin, I can even make landing page with it.
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.
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?
I show you in the video, you use the Header, Footer, and Blocks for Elementor plugin, if you don’t have Elementor Pro.
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.
Thanks for the helpful video! I
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?
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.
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
Thank you Isaac. Very kind of you to say.
Great tutorial. Do you know if this works with the free version of the Astra theme?
Thanks Dave! It’s amazing. But I want to know can I use this method to free Astra theme?
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.
Thanks,
Jerry
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.
I don’t know I’m sorry. I think best to ask the developer of your theme.
I have the same problem Faizan, if you’ve found the solution please let me know! thanks, Kate
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.
Hi,
what if would I preserve the menu design css coming from my default active theme (Customify)?
Thank you, Dave. Finally, I was able to create a menu without having to buy an elementor pro plugin. Your guide is very useful for me.
Thank you so much!!! You made my day, really what I need it!!
Hi Dave,
Please, do you know some css code for a hello theme menu sticky that works with every page?
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.
the menu items are not getting shown*
Hello Dave, thank you for this video. It help me a lot. Tomorrow I will try to do custom header by myself.
Hey – I’m curious what comment plugin you’re using here.. it’s great!
Just standard WP comments, part of the GeneratePress theme.
Excellent Dave you are the best !!!!!
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?
Yes I spent alot of time doing this – I am using Airi theme- am going to try using a shortcode.
Look great, what if I want different header for mobile?
This video tutorial is just perfect for my need.
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.
Jean
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?
hey thank