Elementor Pro Header Tutorial

[@emekaikechi7999]

Thanks for the video Ferdy. Best one I think I've seen on elementor menus. Looking forward to viewing your other content.

[@ferdycom]

Thank you Emeka, I did my best to cover the video with all the neccecery information 😊

[@MemerDad]

@@ferdycom You are amazing man. I keep messing up my header and keep coming back to this video to fix it. XD thank you

[@dejasharnay5205]

Two years later and this is still extremely helpful! Thank you! For anyone watching in 2022 at 19:34 where he positions the socials to in line. That option is now in the layout section in the width drop-down. Hope that helps!

[@faithqueensleyerobokevbe-p1955]

Ferdy, you are too much ooo. Your tutorial have saved me from losing my job. Anyway, I am a self taught from Nigeria. I really appreciate it bcos you have simpler the uses of Elementor theme builder for me.

[@LunarJune-k9c]

this has been the ONLY helpful Elementor video I have watched and I have seen a lot of them so THANK YOU!

[@CR7-r2f2e]

If I say I search too much in youtube to learn elmentor and elmentor pro but the lessons from ferdy make me learn everything thank u soooo much for everything and please we want more and more and more about elmentor pro

[@ArjunShresthaVlog]

Ferdy, I made my own header after watching this video. I made two rows of header. Thank you for your hard work.

[@valvenetbabu]

One of the best tutorials that I've come across. I'm curious to watch all of your tutorials. Thanks a lot.

[@digitalmindstudio7683]

I learned a lot by watching your tutorials. Thank you Ferdy! If you come here in the Philippines I will buy you a beer. haha

[@JoeGator23]

Hi Ferdy, I'm not trying to give you a hard time or anything... Your channel is excellent. I've been watching you since you started long ago. Here's a free language pronunciation lesson for you, even though your English is fantastic. WORD: Duplicate (To copy) You say: Dup - la - kate Actual pronunciation is: Doo - pla - kate Sorry for the correction, I know people hate this type of message. You're a smart guy... I thought you would like to know since you use the word often. You do so much to teach us and I am grateful for your channel. I just wanted to give you something in return. Cheers!

[@ferdycom]

Hey Joe! Thank you! I love it when people correct me. I want to improve over time! So thanks 😊

[@JoeGator23]

@@ferdycom Good for you, mate! I am the same way... I'm looking forward to your next video. Keep up the great work and cheers again!

[@InnoceptHub-mo9et]

Thanks a lot bro. I got stuck with mobile nav menu setup and really messed up it. Your video saved me. Now i will follow as you instructed. Thanks again. Keep uploading such helpful tuts.

[@flexwinggpipi]

opening that separate navigator menu really speeds things up.. Thankyou Ferdy. It also solved a problem in a previous lesson where you bring the picture background up to overlay the menu and logo .

[@JamesMall007]

Thanks Ferdy, I've been building Elementor Pro sites for 2 years, always wanted to do this!!! Learned so much starting out from watching your videos, glad I watched this one, always good to learn new things.

[@rtrafayet1489]

Ferdy our videos are very useful. And your explanation system is very nice. Very easy to understand. Thank you so much. long live you🥰

[@zeeshanmohy-ud-din2312]

Thanks a lot for the video Ferdy. I was looking for sticky header for quite some time. I was especially having issues with changing the menu link colors and the logo after the header becomes sticky. Thanks a lot once again. Many of my friends are learning from you too. A lots of love from Pakistan.

[@nftmagics3374]

BEST TEACHER u may not know this ur unique quality. keep it up

[@SeoulToSeattle]

Thank you for making a lengthy video with timetamps! Your information is really helpful and glad I subscribed

[@aliendesign2023]

I love your tutorials, I've learned so much. Thank you for another fun and entertaining video, with your quirky humour.

[@anna.buckowska]

I really appreciate all your tutorials. I find them very informative, well paced as well as practical. Huge thank you!

[@pierreshiraziefard629]

Freddy,, you have made using elementor so easy to learn as I was struggling for past 1 year. Thanks again.

[@betterbusinessweb1196]

Thanks Ferdy! I consult your videos from time to time to perform some tasks. Thanks for making these very informative videos.

[@MatthewFurman]

Wow, amazing. TBH, it wasn't easy. Yet I implemented and customized your incredible header for my new website. Took me 2 days. Thank you, thank you, thank you. Now I can continue with How To Make A Website With Elementor Pro 2021.

[@damejove3019]

Sooo good! I shouldn’t have bought your Udemy course. Just kidding. I have learned a lot and I’m learning a lot more from your tutorials. 💯

[@itsorlo]

My english is bad, but i really love this channel, he helped me so much in my website, thx so much bro! :)

[@michadruzgaa8793]

This is the best tutorial I've ever seen! Great job. Thanks a lot!

[@BosseurIntl]

An absolutely well explained, very easy to follow and every instruction is to the point!! . Have a request can we make the nav menu turn into a drop-down menu when we scroll a bit on desktop and can we add a bit delay in or an animation when it changes the color after a scroll?

[@najmashaheen7500]

awesome.. the way you defined each and every step is really awesome.. love the way you teach :)

[@klmbr9397]

Awesome tips! Thank you ! Any idea how to switch the underline pointer to black on the sticky header ? Thanks in advance!

[@eriqtrig]

U answered about 12 of my worrying questions. I'm grateful man

[@SargeKot]

Thank you, Mr. Fruty Your tutorials are the best ❤

[@fabriciolujano]

Amazing Bro! Nice tutorial again! You are one of the BEST teachers out there. Keep it Up!

[@OSAMAABUDHROOJ]

From the bottom of my heart thanks sir Message from Palestine

[@ekramulislam4950]

Hey, ferdy your Elementro Pro tutorials are wonderful and unique I like them. I am from Bangladesh. Thanks for the Creation....

[@루루97]

I don't see "positioning" at 19:27. I see "mask" instead of "positioning". For those who don't have "positioning" like me, I found an alternative. Advanced > Layout > Width > Inline (auto).

[@dezinur]

Hi bro how are you, i hope this tutorial will be more helpful, i always pray for you to be healthy and wealthy, stay blessed always bro n keep it up

[@mdemranraj7666]

Thanks a million, Ferdy.. Love from Bangladesh❤❤❤❤

[@ayouboubliha7819]

30second on the video, and I know this video is going to be very informative, thanks a lot man.

[@mayomarmusic]

You are amazing! Thank you so much for this tutorial. Learned a lot. Keep up the great work.

[@sandraneitzke6323]

Hello Ferdy, First let me say that I am very new at learning wordpress and elementor pro. My question is not a criticism at all. It is truly curiosity. I started out with a Blocksy template that did not have the transparent menu bar. I did manage to get the effect that I was looking for, but there were problems. I set the margin of the hero picture at the top at a negative number. I just noticed that you set the bottom margin of the header to a negative number and then you adjusted the Z-index. My Z-index is blank, so the hero picture must naturally be the top layer? My question is: Does it matter which one you adjust and why? Thank you for this tutorial. It's helped me to better understand how this all works.

[@parfumkarakter9382]

hi Fredy, thanks for your detailed tutorials. my question is, how to activate the imported header from elementor kit? thanks

[@haraldbiesenbach9501]

Hi Ferdy, absolutly stunning video. Very Well explained. I see that you also have a css scrit to relace the entire header on scrol. Having seen your video, where do you put this script? Isnt it easier to replace the header. I am asking because I have a search widget in the header and I cannot get it changed to the opaque view... Looking forward to your reply

[@EasyCookVideos]

Great video. The 'edit header' orange tab has disappeared from my header and I can't select it to edit it. Any idea how to fix that? Thanks.

[@루루97]

I can only see "services" and I can't see other menu's on the homepage, because they are not in white color. So for example at 48:04 only "about" is in white and others are in blue. So it's not possible to view other menus other than "about".

[@chafrewilcha]

Super, super, super tutorial!! (Charles from Atlanta, GA.)

[@improvthesupervillain306]

Curious on why you immediately decided to turn widgets to zero? Trying to get an understanding of your process as I am a super noob beginner and that was the one thing that threw me off lol

[@DharmaRakshatiRakshitaha]

Thank you for the video Ferdy! My Elementor Header and Footer keep disappearing after I make changes. It reverts to the plain WP header and footer. They are both important for the functionality of our non-profit. How do I bring them back? Thank you!

[@MakiwaTinashe]

Thank you, Ferdy. You just made it simple and clear.

[@Flamebamboo]

Dude your videos are to fantastic i dont know how to say it keep up the good work!

[@saurabhshrivastava12]

Thanks Ferdy for this superior Header tutorial!!!!

[@brentedg]

Very good tutorial!! I love this. I don't know why Elementor doesn't bake this into their editor. I have always had to rely on the Sticky Header Plugin which sometimes has issues with updates.

[@designingkitty]

I have to finish watch this later, but thanks. If you make anything with elementor pro, after the year, will what you create for the website still work and be visible??

[@realrussclarke]

Fantastic Ferdy! You are teaching me a ton of stuff thanks

[@albertbauer3143]

Hi Ferdy, love your tutorials and I have bought Elementor Pro as well as Astra Pro to build my website. Watching your videos I realize that you can implement sticky headers through Elementor Pro or through the Astra theme. Which approach do you recommend? Are there any advantages to one or the other? Thanks!

[@MemerDad]

I’m a noob myself but I think a general good idea is to design things with one editor as much as you can so you don’t have to go back and forth between editors. Also, both Elementor and Astra seem extremely capable so I think it really doesn’t matter.

[@diamonddigitalmarketing5106]

Hey Ferdy! Great video!! How do you change the color on your Agency header template from the bright pink on the hover once you have scrolled down?

[@ParkerOverlees]

Great video, just wondering where did you create your logo? I need to make one like yours

[@lucreceaugusma7656]

Great job Ferdy! You explain things very well. This was the best video I've seen on this topic. Keep it up!

[@ferdinandbichler3785]

thanks

[@utleyadmin9679]

Great Video my friend... I completed a solid menu..

[@jamiekneebone8778]

Nice video Ferdy! One thing though, when I open the hamburger menu in Tablet mode the menu opens inside of the header, in the video it opens smoothly under the header so it doesn't change the header size. Do you have any idea why this could be happening? Thanks again for the great video and would love to hear from you!

[@HPguido]

Thankyou but is there an way to get my checkout cart in the header? makes it easier for customers to see the symbol to checkout.

[@pederknudsen5249]

Hi Ferdy. I´ve watched between 75 and 90 YT tutorials and your tutorials are far the best. Can you kindly tell me if the menu you make, is sticky on mobile as well? The reason I ask is, I´m about to delete my menu and underlying content and proceed with your way.

[@graememcgregor8407]

Thanks Ferdy for all your videos, they are a massive help! Re: headers, I have also seen headers that shrink on scroll so that the logo can be large on loading but out of the way on scrolling. Do you already have a video with that or is that something you could show?

[@oli.v.v.]

One problem when you change the color of the menu to black. Then all the color settings for the drop down menu and submenu will become black as well including all the buttons. Which is not what you want. Is there a fix code for that? Let say that the dropdown menu items need to stay white and when you hover turn green.

Thanks for this vídeo. Very nice Work. How can I change a individual color of a menu item? Like menu White, another black? Using css? Thanks

[@gemjen802]

Nice video. I have a problem with my homepage. The background and background overlay doesn't show when I updated my homepage. Do you know how can I fix it? This is my first time using elementor. Thankyou

[@Oliview321]

Is it me or your screen recording resolution is a bit blurry? Thanks though its helped a ton.

[@kiraho8557]

thank you, Ferdy. Your video is very helpful.

[@putudharma4352]

Nice, just about to search about this, and your vid came up, can't thanks enough 👍👍

[@oli.v.v.]

Amazing video. Well explained. Is there a possibility to change the size of the sticky logo so the static logo and header is bigger and from the moment you start scrolling the sticky logo en header becomes smaller

[@Aziz-Ahmed-UK]

Very helpful tutorial and thanks for sharing it, anyway do you have any tutorial on how to make full screen menu in elementor? or can you make one? will be very helpful. Thanks

[@m-soundstheproducer]

When I apply the code for the color change around 27:47 nothing happens!! I get this exclamation mark at the custom CSS, does somebody know what the problem here is?

[@emilmihov]

Wow! It was an excellent and creative tutorial. Thanks for the video.

[@cindy5965]

I really like your videos! :) Thank you very much Ferdy! ^_^ Watching all your videos!

[@ferdycom]

Great to hear that 😊

[@khashayarseangoudarzi5894]

Great Video, but I do have one problem... when I scroll... my columns in my header are not in the center of the header anymore... any Idea on how to solve ?

[@justiceoppong9841]

Hello sir thank you for such an amazing and educative video please I am using motion effect on my website but it is not loading on the windows explorer browser and some other browsers I have done the caching but still not fixed but it load well when i am using google chrome can you please help me fixed that thanks

[@Aman-wk9vd]

Amazing tutorial. thank you so much, Ferdy.

[@Paxpictures]

Hi Ferdy, why the backgroundcolor of the dropdown-menu is not affected by this css-code? I would like to set the menu to transparent and change while scrolling to white. My only problem is that the dropdown menu is not changing the color to white when scrolling down (if it is set up to transparent basicly). Thank you for this great tutorial anyway. It helps a lot!

[@AnthonyTilahun]

Hi, wondering how you can make the header menu collapse or expand? When it's collapsed, there'll be a little tabbed arrow pointing down to pull out the menu. Do you know how to do this?

[@simonzinnhobler2042]

Hello, does anybody know how to adapt the css code to show the hoover colour from the menue also in the scroll down header? Thanks

[@Anista09]

Insanely GREAT. Thank you Ferdy !

[@methedragon]

Hi Freddy, thanks for the video! What if I don’t have a white logo but a transparent one?

[@susangemayel-tapper3794]

BRILLIANT WORK!!!! Thanks Ferdy!!!

[@Azzuwayed]

Best introduction, and everything else.

[@amandasmith8826]

Hey Ferdy, thanks voor je duidelijke video, heb mijn skills kunnen verbeteren. Er is alleen 1 ding waar ik maar niet uit kan komen en hopelijk weet jij dit.Het hoofdmenu blijft mij niet likbaar, alleen het dropdown menu. Als ik bij het menu kijk zie ik alleen maar ' aangepaste links' en kan dit nergens wijzigen. HELP! Hoe maak ik het hoofdmenu klikbaar en een klikbaar dropdown menu? Thanks alvast!

[@iigormata]

Thank you, I am enjoying this tutorial a lot.

[@TheMISBlog]

Great Video as usual Fredy, thanks

[@learn_with_malvis]

can't thank u enough, this is superb

[@hosseinsaber8821]

you are is pretty techer , tanks for good teaching

[@ДимаБелогуб-ю6ч]

Do you know how to make header cached so it wouldn't re-load and stand still when page is updating, or user switches around the pages?

[@peterjohn1664]

Wow! that was awesome, thanks a lot man, Stay safe

[@davidwright3902]

'Hi Ferdy, thank you for this video. I was able to follow along but have one small issue. When I scroll, the header background changes color but the icons and text do not change to the color specified in the custom CSS code. They go BLACK instead of WHITE and so my menu and social icon can not be seen once the sticky effect begins. Can you help?

[@tipjar247]

Hi ferdy, nice to see you in full swing,

[@marceli1972]

Hello! Thank you very much for this course. Is very good. I have a request for you, I made a mistake with this task that affects the appearance of my work. Can you help me fix my error?

[@stealthbusiness]

Great tutorial, Thank you Ferdy. :-) Would you do one on How To Have Different Headers On Different Pages Using Elementor?

[@creativemarketing5582]

Great Video again Ferdy. Only issue I have is when I scroll down my Sub pages in menu change from white to the blue. Any way I can keep the white text on the dropdown Menu? Thanks again

[@MachineOperatedBot]

I'm having the same issue, have you found a solution?

[@mongolianfamily2024]

Thank you . Your video was so helpful.

[@ferdycom]

You are welcome 😊

[@kerawelt2008]

Thank you Ferdy ! Another smashing tutorial of yours !

[@DavidJonesMarketing]

Hi Ferdy, Can what you have shown in this tutorial be also done using the Astra theme and Elementor?

[@dithmarscherwebdesign]

Ferdy, what do you think about off-canvas menus created with a popup? Will popup blockers try to block them?

[@criadordedesigncanva]

awesome, your tutorials are great! how about a remag tutorial? nobody understand how to use RH frontend tools , regards!!

[@OSAMAABUDHROOJ]

Hi Mr. Fredy, I would like to ask you how can change the color of the sub-menu when using sticky code? Thanks, sir

[@cristianjimenez5027]

Hello thanks for your tutorial, can I create different header for desktop and mobile?, how can I do with elementor? Thank you