Divi Header Design | How to make a custom header in Divi

In this Divi Header Design, I show you step by step how to make a custom header in Divi. Divi header is an important part of your website because it helps people navigate your website.
Design your Divi header easily with this tutorial.
Get 10% OFF Divi Theme Builder - funnelstoincom... (Includes BONUS Course)
0:36 What we will be designing
1:37 Divi header design
1:51 Add Divi Glogal header
15:26 View final design

[@kathleenlavery460]

Mak - I cannot tell how many times your videos have saved the day. Thank you for all you do!

[@poolman20001]

I love you dude! You have helped me a lot over the years with Divi! Keep up the good work man, is really good stuff. Quick and simple.

[@sardarsaab881]

Love u dear ... your every video makes me stress free ...

[@sitekrafter]

Thank you so much 😀

[@snmediagroup4251]

Divi is one of the best tools on the market!

[@schnurrwerbung8289]

Perfect directions! Thank you, DIVI's MAK!

[@yeseniadallapieta368]

Super mega good you’re the best

[@erinabbatangelo4033]

Ok, this made it SO easy to learn! Thank you so much.

[@metal4eva208]

Great video !

[@sitekrafter]

Glad you enjoyed it

[@benjaminwymer7397]

Super helpful! Saved me hours of work and makes my site that much better!

[@TG-cz6md]

Mak, your teachings are so great that I stopped listening french teachings (I'm french), even if it's more challenging, the results for me are amazing. Thx a lot really.

[@sitekrafter]

You're very welcome!

[@bintesaif8360]

@@sitekrafter from where can we add the sicky header option in padding? Please guide me about this.

[@maka1510]

Great - thank you!

[@ucbpabnabranch]

Great Tutorial. 👍

[@lennartverhoeven4496]

Thank you!

[@tarakrahman3769]

Love you Dude!

[@kiaraepperson8071]

what is that css code to align everything in the midde?

[@tarakrahman3769]

very nice video

[@luistriana]

Gracias, buen tutorial.

[@pinksugarfluff]

Awesome Teacher!

[@Gozycode-Academy]

Thanks for the tutorial brother! It saved my day as well! Cheers. Steve @ Gozy Mobile Solutions

[@davidromero7823]

I love your videos. thanks man!!!

[@reborysgh143]

Good

[@owenL]

Thanks Mak. Always great!

[@bimjean1053]

Thank you very much! :) Does anyone know how to make the header overlap the website content instead of "pushing it down"? When I make the lower of corners of my header round it does not overlap the picture on my front page and therefore there is a white background where the corners have been.

[@jadestarwilliams8953]

Hi, have you ever figured out the white section exposed under the header when scrolling? I am sitting with this issue now. :(

[@bendostorebendostore8004]

Maybe you need to make a video tutorials for custom humberger menu potitions on mobile..because by default only on left..so how to set humberger menu to right..

[@Beam28]

Thanks for the great tutorial 👍👍

[@rafaelcavalcanti9722]

i love you, brother.

[@v.k.5222]

This is so good--thank you!!

[@sitekrafter]

You're so welcome!

[@misschief.artist6954]

You are amazing. Thanks a lot

[@laurenstephens9070]

This is great! Thanks.

[@chadgarber]

How do I align the menu with the logo vertically?

[@gizhekhairelddine7109]

thank you so much for the tutorial! :3

[@KlavsDubra]

Thank You

[@lonewalker9632]

Hello, I made a full width custom header, it displayed well on a 1920p screen, but when displaying it on a 1366p screen, it got messed up..what's wrong?

[@explorewitharahman]

brilliant tut....tnx a lot...

[@aminsab8893]

great tuto Make. that was a good methode to costumize header. easy and good.❤️💎

[@mirzarayeesbaig8241]

Love you Mak

[@LucasAlmeida-fx6eb]

Finaly some good at teaching Divi! thanks man!

[@dhammikadissanayakamudiyan725]

wow great video,

[@Meaverickk]

Someone, please help me: When I change the color to anything other than transparent, it works. But when I want to make the background transparent, it stays white! I can't seem to find a solution on my own.

[@alejovegab]

Hey Mak, awesome tutorial!! I have a question. I have a membership website, when I log out and click on the back button on the browser, my website shows protected content again. Can you please help me? Thanks a lot

[@Jornes83]

Hi! I'm new to Divi. I would like to ask, how to make the social icon with hover effect available?

[@cudciocia7781]

How to move a cart icon further right from the menu?

[@wordpressstan4012]

Question, when choosing transparent for the default state, my main site now just shows as white. When choosing 2 different colors it works perfectly, but transparent just shows a white space as default state at the top instead of putting menu over top of my background image below. Any suggestions?

[@Meaverickk]

Same here. Do you already know something to fix it? Please tell me if you do!

[@angelamcquistion3533]

I had this problem as well since I am using a fullwidth global menu. I discovered that the custom menu it is sitting above/before any page content rather than overlaying on top. This is why the white page background is showing. To get around this, I had to go in and make the bottom margin on the fullwidth menu a negative value (-120px). Then to compensate any spacing issues, I added some top padding to each page's content. Hope this helps!

[@tv175s3]

For me the CSS code display: flex; didn't work with a 3-column row as 1/4-1/4-2/4. When I changed the row to 1/4-2/4-1/4 colums it started to work, I can't explain why.

[@Whiz_The_Mindbender]

Amazing content right there. One thing though, don't you think removing socials from phone/tablet is a bit impractical for a solution?

[@KyleBevis-u7j]

Yeah it's an absolute cop out.

[@samiulhaq318]

Awesome video

[@MrRawUK]

Oddly when i make changes to the image the whole thing stretches out on the builder. Unless i have things set to auto i cannot change anything.

[@anupshah2519]

why when i add custom global footer then the layout of my page changes and header disable

[@tallkevin01]

Thanks for the video.

[@ropwoodworking]

You are a great teacher! I'm one year late though, and Divi seems to have changed a lot. I find out that they have moved the scroll option to" Advanced" but I can't find out where I change the padding, and background color when the scrolling starts?

[@Kamalpurohit05]

Great Job Mak... love it

[@PRAFITJOSIAH]

Nice Works Perfect!

[@darkdaw77]

Hi, wonderful tutorial, thank you. However I have a problem with the search box in the primary menu, I can't change the text colour. Does anyone know how to change it via CSS? Thank you

[@Hassan-re8kh]

the dropdown menu came when you changed the size to mobile but what if we want it in desktop site

[@ajantharubanshangaralingam7697]

hi mak, how to make custom header in divi + woo-commerce like amazon with bigger search bar . i have search more videos but elemantor got divi dont have

[@spitsparrow]

is it true that when u do this you no longer have ANY mobile menu styling options in divi

[@tulasisindhu2542]

If we take two rows in a section, how to reduce the height of the header.

[@federicodonatone5909]

Love u

[@Alphadragon1979]

Amazing man! Thanks so much! I do have one quick question...how would I resize the logo? I've been trying and it just seems to refuse to resize. I've made it sticky as well, tried changing the sticky size and it just doesn't work at all.

[@assadalahmed]

How we can make language button in divi header ?

[@merkatinocloud]

Thank you :)

[@petrenicolescu493]

What if I want to keep the social media module on mobile devices? Are the mobile users not allowed to use this feature? How do you properly align the social media module? Otherwise, let's just hide everything that doesn't look good on the first try.

[@adeelshahid5925]

BUT HOW CAN WE ADD CART ICON ON CUSTOM HEADER IN DIVI? IF anyone knows please response .thanks

[@nargiskhatun4116]

How to change the hamburger icon color? Please tell me.

[@LilianTarot]

Ideally, in the mobile version, the drop-down menu should occupy its own space as a block that displaces everything else when it is opened, that way, if there is advertising ADS, the drop-down does not overlap with the ad. Could you make a tutorial with it? Thank you.

[@kriscounselorhealth8460]

Hi MAK, I am writing to you from Italy. I would like to know what the procedure for setting layout pages for proper visibility on tablet and phone. Thank you very much.

[@davideguerrieri9017]

It doesn't work for my guys. Everytime I try to change the section size while scrolling it remains the same size. I've followed the tutorial and seen it about 20 times. What could it be wrong? Moreover when I change some colors of spacings it changes the size of my logo (in the home page not in the working one). Please help me!

[@-ant-5808]

Hey, does someone know how to add | between each menu item

[@SafeDriverTraining]

Hi Mak I bought learndash and divi through your links but where do i send the invoice copy so i can get access to your courses?

[@Hassan-re8kh]

why the dropdown menu didn't show for desktop?

[@websiteemail4900]

Nice but we really need way better mobile menus than a dropdown.

[@reda7429]

GOAT

[@evonnelai6758]

Mak!!! Thank u!

[@lmimanajia1028]

Think you

[@asabeaagyemfra1847]

that's cool . but how can i add more email recipient to divi forms molude

[@AgileWaters]

This is an amazing video! I only have 2 problems. My menu is long, and it looks like people can't scroll the menu, to see all menu items, on a phone. And, how do I get the Cart icon to show?

[@AgileWaters]

I figured out how to get the shopping cart. Just need to know how to scroll a long menu on a device.

[@erinabbatangelo4033]

@@AgileWaters Has anyone found a solution to the scrolling issue?

when this effect is tested in the mobile version, an error occurs, a spacing, how to solve it?

[@michaelcarvalho3686]

Nice video.Please tell me how to place to logos in the menu bar? Both will be inline with the menu items. The 2nd logo will be a little away from the st logo and centered between the menu items like Home, About us Contact

[@hoopstalkcentral]

they dont have sticky option in 2021

[@x.rubiks]

i am a divi sub how can i get the course plz help thx

[@perfecto1701]

You should've placed the social media icons within the dropdown menu on mobile view, getting rid of them was a silly solution, no doubt you're a web designer mate.

[@sitekrafter]

I prefer not to have them.

[@Chaundell81]

Hi Mak. I’m wondering when someone will respond to my email. I purchased Divi with your link and can’t wait to see your course. Hope my email didn’t go to spam🤦🏾‍♀️

[@joeys7570]

He won’t write back

[@ttowntshirts]

I still for some reason cannot get the mobile drop-down menu to show up no matter what background I change it to

[@joeys7570]

He won’t write back

[@ttowntshirts]

@@joeys7570 he dont ever

[@mikec9057]

there is no sticky position menu in my divi , why?

[@sitekrafter]

Update Divi to the latest version.

[@highrollerph]

Your links don't work. You don't give the freebies that you said after I bought from one of your links. SMH

[@spitsparrow]

When you go to mobile view the hamburger is no longer centred

[@phlprinting]

mobile

[@lkdas8210]

hi, requesting to publish a video on Divi "Read More" Button with jQuery - Reveal a Hidden Section on Click. thanks