This really is an outstanding video and very helpful, especially for a 55 year old beginner like me. But man, you talk fast. :-) Thanks for the assistance. You are a great teacher.
Thank you for your detailed Information. Together with your explanations on your Blog, I was able to follow the Instructions and create a beautiful Header! That was great Information! Karin from Germany
@@elegantthemes Only thing I noticed: Can't have a dropdown menue with your header. It does not drop down. Do you have any hint how to work around this?
This is outstanding - I think it's one of the very best tutorials I've ever seen for Divi, and likely for anything website related. THANK YOU! He's such a great teacher!
To make the Global Header sticky it is not necessary to insert a CSS code. There is a line in the row settings "Scoll effects" where you can make a hook on "stick to top". Sorry for my english, but I have translated it from the Divi Builder in German language.
how do we prevent if from overlapping content on the top of the page? For example when people go to my cart page the title "cart" is covered by the menu.
Below your new menu > Add a new section > Add 'height: (your total menu height)!important; '. This will bump down your page to start below your new menu ...(in: Advanced>Main Element)
Thanks for the video great content!! Very happy for the explanations as I'm getting to learn Divi and is definitely amazing tool. Just quick feedback keep the explanation pace for the WP areas but when it comes to divi explanation can you slow down a bit it will be easier to the audience to follow.
Thanks for the work-around but am I the only one that thinks that the fixed header and footer options should be built into Divi? This and the mobile glitches really do need to be fixed in an update and SOON.
Extremely helpful as I was going crazy trying to achieve things like a sticky menu and now you've covered most of my questions with one tut :) One question though, how would you code getting the menu to reduce in size (including the logo) and remain sticky on scroll?
Hi mak - great video - but when we check it in inspector in chrome (Iphone 6-7-8 eg) it does not look any good..... you HAVE to be better at this... the phone view in DIVI does not match the real world...... hope you get me.... it is just so frustrating....
Can you add a drop-down section to the menu and show us how to modify that section of the menu please. Also.. How do I align the hamburger menu to the right in a 2 column header?
I've created a submenu using the theme builder. But the submenu displayed behind the full width slider. How can I display my dropdown menu above the full-width slider?
As someone who understands CSS there are a couple things that can be improved here. - max-width should be applied to the Row not the Section - Instead of setting the top-margin:10px, you should be using flex-box to center this items within the Nav It's a shame Divi does not allow you to customize flex box options within the Design tab.
This video is really good but misses out a lot of stuff you might need. BEWARE, once applied you can't access the top sections module to edit pictures or any top/first module settings. The module editor is obscured by the global header. There are issues with drop-down menus and the mobile version. I had to get the support guys to fix these issues (which took several hours). They had to add extra code. Eventually, I had so many problems I deleted it in the end. If you have a basic site with no drop downs this is good. Anything more and you might have problems.
My global header hides the content on the page (e.g. some portion of the full width slider on top). How can i restrict other sections to start below the global header?
There is this workaround. I hope Elegant Themes comes with an own solution/upgrade for this issue. For now this may help. Thanks to Pee-Aye Creative: ua-cam.com/video/6URyPP7OCfw/v-deo.html Go to your backend, your WP dashboard and Add code to the < head > of your blog. You'll find this here: DIVI- Theme Options -Integration. Copy and paste the following code over there: jQuery(document).ready(function(){ var totalheight = 0; jQuery(".et-l--header .et_builder_inner_content .et_pb_section").each(function(){ totalheight = totalheight + jQuery(this).outerHeight(); }); totalheight = totalheight + "px"; jQuery("#et-main-area").css("padding-top",totalheight); }); Good luck
Same problem here solved without script : add one more section in your custom header, default position and z-index, after that you can manage with height or padding
Hi!...everything its great..but I want transparent header....everywhere i put my background color to transparent and its still white:)....Can you helped with that:)?.....Thanks...best regards from Slovenia
something seems wrong with this header. it blocks a good portion of the web page. it's meant to show the full web page and then become sticky during scrolling
@@LDOYT I ended up getting rid of the header entirely, using a normal full width section and saving it as a global section, and then apply it to each page individually. Its not ideal but I can still make changes in one location that apply to the whole site and it responds appropriately. Not a proper fix but it'll get me by.
Thank you so much for such a great tutorial!! I have one question though, how can i reduce the height of the header? On the desktop, it seems to fill up most of the screen
Hi Muthoni! 👋 You can reduce the Section/Row/Module height to adjust the height. If you have more questions, please, create a ticket with the Support Team: www.elegantthemes.com/members-area/
A lot of settings ...... I have Lifetime access to Divi but looking at how many steps and settings have to be done, make's me DI(VI)ZZY !! There must be a way to just drag & drop this and click save ?? any suggestions, Brizy ?? Duda ??
What do I need to do if I have more pages that nest under my menu items? How do I get this to be visible? I am having trough getting this to show on my pages. It does show when I am in the Edit Theme Builder.
This is great - however my header (which I made full width rather than max width of 1280px has a "scroll bar" left to right every-time I hover over the header. Obviously I cannot use it like this - can anyone advise what I've possibly done wrong?
I noticed you were setting your text sizes to 10px on tablet and mobile. Just a heads up that accessibility for disabled users require that you have text sizes 12px and above! Remember the disabled users!
Hi Mandy!👋 To check the dropdown menu, please, open the Menu Module Settings and then, with the opened Module, you can open the dropdown menu. Have a look at the screenshot: prnt.sc/1d5gb10 If you still have any questions, create a ticket with the Support Team: www.elegantthemes.com/members-area/
Hi, Amazing !! Did you notice one thing? Top level section of body is under the custom heading. Do we need to manually correct it in every page or there is any fix for this? Thank you so much for the video!!
Hi MAK I had problems with the header lying under my body on my shopping side, but it was usually on my other sides. I solved it by writing the following CSS in the Theme Options> General> Custom CSS: header.et-l.et-l--header { z-index: 99999; position: fixed; width: 100%; }
I've just been in contact with Divi support. They tell me it's a known bug. This code should be written instead of the one I wrote before. #page-container {padding-top:70px!important;} .et_builder_inner_content {position:initial!important;} @media screen and (max-width:980px) { .et-tb-has-header #page-container {padding-top:70px!important;} }
I bought a license of Divi. And I can definitely say Elementor is waaaay more stable and mature. Divi looks cooler but turns out it has tons of bugs. Animated elements in the editor start behaving weird ( flickering, jumping here and there) and you have to switch to the block view eventually which is contrary to what it should be. After placing code widget in a custom header design ( few simple jQuery lines ) , even the block view won't work :( Guys you have to seriously improve. At this point , it is a toy for me, not a serious tool.
Totally agree. Those that have just used DIVI do not understand how far it is behind Elementor and Thrive Architect. Ridiculous. For example: In Thrive Architect making a sticky header and adding all sorts of scrolling and sticky properties to an element is super simple. NO CSS needed. DIVI could be GREAT - but it is just too unstable and not very intuitive. Sometimes when using DIVI (because certain clients want it) I am amazed how many steps you have to go through to just do simple basic things.
Hey mak i am facing some prob please help me When i am trying to add new row for menu coulmn the row is overlapping the global header row instead of going below the header row and also i cant move with move tool as well can you please what possibly could be the reason for this
Hey MAC, the CSS SNIPPET [display: flex;] is not working for me, impossible to align the mobile menu with the logo in the header, any other solution to align the headers?
Many thanks for an extremely detailed and educative video. My hamburger icon on tablet and mobile does not reveal my global navigation though. Any thoughts on why this is? A pointer will be very helpful. Cheers.
This is great, thank you! Just 2 quick questions, 1) If you wanted to also make the header more "transparent" upon scrolling, how would you go about adding that functionality? Would you do a before: & after: code snippet in the advanced tab under the css customizations somewhere? 2) Is it possible to create a "dynamic" global header that changes according to the segment based on a toggle button on the secondary menu?
i walked through this and it works great and looks great when I'm in the divi builder. However when I attempt to make it active, it's missing the actual menu column....
Hi Mak: i watch all your Divi videos. Thank you for sharing the videos. Few days ago i watched your Global heading youtube video and designed my header. It came out nice but the shopping cart and search icons are missing. Before designing the header and making it global, both shopping cart and search icons (lens) were there. As soon as i made the header global both icons disappeared and everything else in the menu are there. Now i am doing a google search to introduce both icons and link them properly. You are the expert. Could you please provide solution/s to solve my problem? I also found one of your 2017 youtube video to make the search bar. Hope you can help me or link to a you tube video. Thank you for making and posting great videos,
Kevin Allen. I found a work around to fix it. It’s another Divi thing that doesn’t quite work. Instead of putting the radius on the section I put it on the bottom row. I then had to mess with the radius settings choosing the Hover state first and then back to the desktop state or else it didn’t work... I think there are some teething problems with some of the theme builder settings. Mak’s stuff is great but very fast and not many explanations for why he is doing things. For example if you do set overflow to hide you will lose any drop down menu. Gotta love Divi even though sometimes the first time you do something is very painful.
![[Step by step] How to create a custom global header with divi theme builder.](http://i.ytimg.com/vi/tBNzGLj-508/mqdefault.jpg)
Fantastic ! Voice = Briliant, Script= Brilliant, Structure of video=Briliant and its simple to follow . Well done
This really is an outstanding video and very helpful, especially for a 55 year old beginner like me. But man, you talk fast. :-) Thanks for the assistance. You are a great teacher.
Thank you for your detailed Information. Together with your explanations on your Blog, I was able to follow the Instructions and create a beautiful Header! That was great Information!
Karin from Germany
Awesome! That’s great to hear Karin 🤩
@@elegantthemes Only thing I noticed: Can't have a dropdown menue with your header. It does not drop down. Do you have any hint how to work around this?
So helpful. You are an amazing teacher. Thanks for keeping the info bite sized and fun to learn. You’re the best!
I was going insane trying to figure out how to do this. Seriously thank you so much for this vid. Saved me many grey hairs lmao
This is outstanding - I think it's one of the very best tutorials I've ever seen for Divi, and likely for anything website related. THANK YOU! He's such a great teacher!
One of the most important videos for newbies.
To make the Global Header sticky it is not necessary to insert a CSS code. There is a line in the row settings "Scoll effects" where you can make a hook on "stick to top". Sorry for my english, but I have translated it from the Divi Builder in German language.
thank you this was extremely helpful
Thank you. I'm starting to love Divi as a page builder.
Many thanks! It would take me forever to come up with this professional look. Saving and looking forward to the Footer video :-)
HOW TO IMPORT THIS FILE BRO
Great! I'm glad to help!
Great Mak! The fantasy of the designer is the limit!
Wow. Great tutorial. Thank you!!!!
how do we prevent if from overlapping content on the top of the page? For example when people go to my cart page the title "cart" is covered by the menu.
Below your new menu > Add a new section > Add 'height: (your total menu height)!important; '. This will bump down your page to start below your new menu ...(in: Advanced>Main Element)
Thanks for the video great content!! Very happy for the explanations as I'm getting to learn Divi and is definitely amazing tool. Just quick feedback keep the explanation pace for the WP areas but when it comes to divi explanation can you slow down a bit it will be easier to the audience to follow.
Thankfully you´re back Mak, more great videos of menus please!
Thanks for the work-around but am I the only one that thinks that the fixed header and footer options should be built into Divi? This and the mobile glitches really do need to be fixed in an update and SOON.
You are amazing! I like how clear your instruction is!
Great tutorial. Do you have one for a custom footer?
Very brief and informative! Thank you sir
Worked perfectly. Thanks
I was just looking for a way to do this yesterday! Yay! Thanks again, Divi.
You're welcome!
It's awesome, Max.
Thank you!
Extremely helpful as I was going crazy trying to achieve things like a sticky menu and now you've covered most of my questions with one tut :) One question though, how would you code getting the menu to reduce in size (including the logo) and remain sticky on scroll?
I went totally crazy with the new thing...
Thanx mate. That was a really good tutorial. And it makes working with Divi a blast. cheers
Hi mak - great video - but when we check it in inspector in chrome (Iphone 6-7-8 eg) it does not look any good..... you HAVE to be better at this... the phone view in DIVI does not match the real world...... hope you get me.... it is just so frustrating....
Can you add a drop-down section to the menu and show us how to modify that section of the menu please.
Also.. How do I align the hamburger menu to the right in a 2 column header?
Hi Paul.... Menu Settings>Design>Sizing>Module aligment> you wil see left, center or RIGHT
I've created a submenu using the theme builder. But the submenu displayed behind the full width slider. How can I display my dropdown menu above the full-width slider?
As someone who understands CSS there are a couple things that can be improved here.
- max-width should be applied to the Row not the Section
- Instead of setting the top-margin:10px, you should be using flex-box to center this items within the Nav
It's a shame Divi does not allow you to customize flex box options within the Design tab.
Amazing tutorial. Is any way of make that menu fade when you scroll?
When I try to change the selection to Hover (@4:05), it keeps switching back to Desktop and wont allow me to change it.
This is exactly what I was looking for. Perfect! Thanks Mak!!
This video is really good but misses out a lot of stuff you might need. BEWARE, once applied you can't access the top sections module to edit pictures or any top/first module settings. The module editor is obscured by the global header. There are issues with drop-down menus and the mobile version. I had to get the support guys to fix these issues (which took several hours). They had to add extra code. Eventually, I had so many problems I deleted it in the end. If you have a basic site with no drop downs this is good. Anything more and you might have problems.
Yup he's right! this video leaves code that you need.
@@adventurewithlawrence could you not just turn global header off, do your edits and then turn it back on?
My global header hides the content on the page (e.g. some portion of the full width slider on top). How can i restrict other sections to start below the global header?
There is this workaround. I hope Elegant Themes comes with an own solution/upgrade for this issue.
For now this may help. Thanks to Pee-Aye Creative: ua-cam.com/video/6URyPP7OCfw/v-deo.html
Go to your backend, your WP dashboard and Add code to the < head > of your blog.
You'll find this here: DIVI- Theme Options -Integration.
Copy and paste the following code over there:
jQuery(document).ready(function(){
var totalheight = 0;
jQuery(".et-l--header .et_builder_inner_content .et_pb_section").each(function(){
totalheight = totalheight + jQuery(this).outerHeight();
});
totalheight = totalheight + "px";
jQuery("#et-main-area").css("padding-top",totalheight);
});
Good luck
Same problem here solved without script : add one more section in your custom header, default position and z-index, after that you can manage with height or padding
@@Herbieatorbie66 Thank you for that
Like it. Cluld you show how to colapse mobile menu items
Mak, your hands work seemlessly, Ma Shaa ALLAH
The latest version of Divi doesnt allow you to change the Z index on the visibility 3:52
How add cart count items & total price in Divi custom main menu?
Thank you for the video. Why did you use CSS instead of section position settings, which has "fixed" setting?
Exactly tut post. your tutorials are fantastic.
Hi!...everything its great..but I want transparent header....everywhere i put my background color to transparent and its still white:)....Can you helped with that:)?.....Thanks...best regards from Slovenia
something seems wrong with this header. it blocks a good portion of the web page. it's meant to show the full web page and then become sticky during scrolling
Exactly my issue as well did you happen to find a solution?
@@LDOYT I'm still hunting for a solution to this as well. Any luck?
Mike Hupka nope :/
@@LDOYT I ended up getting rid of the header entirely, using a normal full width section and saving it as a global section, and then apply it to each page individually. Its not ideal but I can still make changes in one location that apply to the whole site and it responds appropriately. Not a proper fix but it'll get me by.
How do I take the header files and get it into the wordpress instance? Not sure where to upload them once I download from your site. ????
How to make this full width header and how to drift down the next slider or row whatever on the page which go behind the header .please guide
But when you mouseover on menu there is a break rectangle annoying. Where we can get out this?
Thank you so much for such a great tutorial!! I have one question though, how can i reduce the height of the header? On the desktop, it seems to fill up most of the screen
Hi Muthoni! 👋
You can reduce the Section/Row/Module height to adjust the height. If you have more questions, please, create a ticket with the Support Team:
www.elegantthemes.com/members-area/
Hello Mak, great tutorial. Can you please explain what sticking is & why that code is needed? Thank you!
If its sticking that means that it stays the same place on the screen all the time. So if you scroll is going to be in the same spot still
How does one space the menu items further from each other ? For example the space between Home and About us etc ? I want to move them further apart
How to push the page content down by height of header?
How to make drop down menus work?
What was the point of putting a radius on the border of the grey background if it's gone when you put the second white part?
This is great. However, when I saved the header and went to my home page, the menu appeared above the top header. How do I fix this?
Facing the same issue
A lot of settings ...... I have Lifetime access to Divi but looking at how many steps and settings have to be done, make's me DI(VI)ZZY !! There must be a way to just drag & drop this and click save ?? any suggestions, Brizy ?? Duda ??
What do I need to do if I have more pages that nest under my menu items? How do I get this to be visible? I am having trough getting this to show on my pages. It does show when I am in the Edit Theme Builder.
This is great - however my header (which I made full width rather than max width of 1280px has a "scroll bar" left to right every-time I hover over the header. Obviously I cannot use it like this - can anyone advise what I've possibly done wrong?
Excellent 👍 how do I access the css code
Great tutorial. Exactly what I was looking for too! Thank you!
How do the menu items stack on mobile/tablet?
everytime I switch to a different view eg. PC view > Phone view the majoirty of the stuff inside the header is cut off or misplaced...can you help
Thank god for the pause button...You could go a little bit slower. Maybe explain what your doing?
What would happen if I already have a menu in place but decide to design a new header using the Divi Builder ?
custom header doesnt apply to theme and reeplace the actual logo menu header i asign like you explain but nothing change
thks
The custom header overlaps the content. Is there a better way of preventing that besides putting padding on the content?
I excluded page from the header but it's still showing with the home page in the header.
Anyone can answer?
I noticed you were setting your text sizes to 10px on tablet and mobile. Just a heads up that accessibility for disabled users require that you have text sizes 12px and above! Remember the disabled users!
This doesn't seem to work with my dropdown sub nav items. Is there a way to ensure this content displays?
Hi Mandy!👋
To check the dropdown menu, please, open the Menu Module Settings and then, with the opened Module, you can open the dropdown menu. Have a look at the screenshot:
prnt.sc/1d5gb10
If you still have any questions, create a ticket with the Support Team:
www.elegantthemes.com/members-area/
Hey Mak, great tutorial! Thank you. :) I have a quick question, is there a way to adjust the spacing between each menu item?
how do I make the sticky header not covered by the admin bar?
Tus tutoriales son geniales!!! siempre me resuelven todos los problemas!
Hi, Amazing !! Did you notice one thing? Top level section of body is under the custom heading. Do we need to manually correct it in every page or there is any fix for this? Thank you so much for the video!!
I am having the same problem... hope someone answers..
Hi my friend :-)
In version mobile, I don't see the voices of menu. Dropdown menu don't appear... Why?
Hi MAK
I had problems with the header lying under my body on my shopping side, but it was usually on my other sides.
I solved it by writing the following CSS in the Theme Options> General> Custom CSS:
header.et-l.et-l--header {
z-index: 99999;
position: fixed;
width: 100%;
}
I've just been in contact with Divi support.
They tell me it's a known bug.
This code should be written instead of the one I wrote before.
#page-container {padding-top:70px!important;}
.et_builder_inner_content {position:initial!important;}
@media screen and (max-width:980px) {
.et-tb-has-header #page-container {padding-top:70px!important;}
}
@@hutlerDK That was very helpful. Thank you.
I bought a license of Divi. And I can definitely say Elementor is waaaay more stable and mature. Divi looks cooler but turns out it has tons of bugs. Animated elements in the editor start behaving weird ( flickering, jumping here and there) and you have to switch to the block view eventually which is contrary to what it should be. After placing code widget in a custom header design ( few simple jQuery lines ) , even the block view won't work :( Guys you have to seriously improve. At this point , it is a toy for me, not a serious tool.
Totally agree. Those that have just used DIVI do not understand how far it is behind Elementor and Thrive Architect. Ridiculous. For example: In Thrive Architect making a sticky header and adding all sorts of scrolling and sticky properties to an element is super simple. NO CSS needed.
DIVI could be GREAT - but it is just too unstable and not very intuitive. Sometimes when using DIVI (because certain clients want it) I am amazed how many steps you have to go through to just do simple basic things.
Hey mak i am facing some prob please help me
When i am trying to add new row for menu coulmn the row is overlapping the global header row instead of going below the header row and also i cant move with move tool as well can you please what possibly could be the reason for this
Brilliant!! Thumbs up
You're welcome! 😄
Hey MAC, the CSS SNIPPET [display: flex;] is not working for me, impossible to align the mobile menu with the logo in the header, any other solution to align the headers?
I cant import the file! when importing it says 'This file should not be imported in this context.
'
Hi there 👋
Please ensure that you are importing it via the Theme Builder > Portability > Import: d.pr/i/b7ZRxa
Many thanks for an extremely detailed and educative video. My hamburger icon on tablet and mobile does not reveal my global navigation though. Any thoughts on why this is? A pointer will be very helpful. Cheers.
Can you open a chat with our Support Team so they can check this for you further? 😄
www.elegantthemes.com/members-area/help
Can we get the Extra theme Divi builder fixed so that you can use hyperlinks and the dropdown menu to change text syles (Heading 1/2/3/4/5) please!
Thanks a lot, this video was really helpful!
It's really cool.............. Thank you so much kallu bhai :D
Where to change text size for dropdown sub-menu? thx
This is great, thank you! Just 2 quick questions, 1) If you wanted to also make the header more "transparent" upon scrolling, how would you go about adding that functionality? Would you do a before: & after: code snippet in the advanced tab under the css customizations somewhere? 2) Is it possible to create a "dynamic" global header that changes according to the segment based on a toggle button on the secondary menu?
Bro due to your global header all my default template gone. Is there anyway to get it back?
How can i make a extra theme 3 feature post in header
where is the css cod for forcing the elements to align please
How do I get my previous menus back?
mobile menu drop down hides inside section and does not overflow even through visibility is set and z index 99999.
i walked through this and it works great and looks great when I'm in the divi builder. However when I attempt to make it active, it's missing the actual menu column....
me too :(
Hi Mak: i watch all your Divi videos. Thank you for sharing the videos. Few days ago i watched your Global heading youtube video and designed my header. It came out nice but the shopping cart and search icons are missing. Before designing the header and making it global, both shopping cart and search icons (lens) were there. As soon as i made the header global both icons disappeared and everything else in the menu are there. Now i am doing a google search to introduce both icons and link them properly. You are the expert. Could you please provide solution/s to solve my problem? I also found one of your 2017 youtube video to make the search bar. Hope you can help me or link to a you tube video. Thank you for making and posting great videos,
When i hover over the second menu we created, it makes the bottom edges no longer curved. Suggestions on how to fix this?
Hey Kevin. Did you find a fix for this? It's so annoying!!!
@@paulknowler sadly no! 😢
Kevin Allen. I found a work around to fix it. It’s another Divi thing that doesn’t quite work. Instead of putting the radius on the section I put it on the bottom row. I then had to mess with the radius settings choosing the Hover state first and then back to the desktop state or else it didn’t work... I think there are some teething problems with some of the theme builder settings. Mak’s stuff is great but very fast and not many explanations for why he is doing things. For example if you do set overflow to hide you will lose any drop down menu. Gotta love Divi even though sometimes the first time you do something is very painful.
Finding myself really wanting to just get in to the HTML to make each column function the way I want it to at each size. How can I do that?
You will have to change the CSS not the HTML :)
I don't have the Theme Builder on my dashboard because I'm using the Divi Theme. How do I create global headers?
Please help me!! How to create costume Header to user login/out?
Very informative, thx very much
You're welcome Ralf! 😄
This is nice really, but how is going to look on mobile? :)
Theme builder is not showing in my menu
Wish this had been presented as a simple custom header as Part 1 so that I could get the concept down. As it turns out, I gave up. Thanks though.
how do you transform it on scroll?
i did everything he did...but once i reload the site...it shows totaly destroyes...i mean the header
when you hover over the menu the border radius becomes zero
can you replicate the EXTRA theme global header?