Bad solution! Loading more content than needed? No thanks. Why is there no media query function that we can see in the visual editor? I just want it to be set to desktop, design the menu, then set it to tablet/mobile and design it differently. When I bought Divi I thought all of this was included, yet I keep running into this kind of time consuming stuff that just slow down my process as well as the speed of my websites.
I agree. This method is nice but it's full of bugs. mine shows 3 headers, even when disabling on different type of devices. It still shows every header I make.
It seems like the logo and the hambrgr is not in the same line for Tablet and Mobile view. You have made so many videos on making a Header and no one of those videos are perfect. They always had some flaws. I learnt a lot from you, I am thankful for that. However, as an user I am not happy the way you handled Navigation Bar.
I am so glad I found this! I always follow your videos, and I haven’t done a new website in a while, and I suddenly couldn’t remember how to alter the headers and footers for tablets and phone. You’re the best!❤
You can change your viewport in the Chrome inspector window by selecting the dropdown above the web page. During your video, your selection was set to Responsive. This gives you a handle on the side of your website so you can drag and change the width of your viewport. Selecting a cell phone or tablet is as easy as selecting the dropdown from Responsive to iPad, iPhone, or Android. You can even create your own custom viewport to target specific mobile devices.
Mac we appreciate I appreciate what you do here and that’s why it irks me to be negative here but making three headers, WILL bog your site down. this is not good advice, there’s better ways around it ... for what it’s worth it’s good to know but not useable in a professional setting. imagine loading up the same header , 3 different times. two times if you really need, is best practice NOT 3 headers .
OK, what am I missing. I build my header menu in the theme builder, but when I look at it on Tablet and Phone the 2 rows are stacked one atop the other...yours is nicely positioned side by side
go to the row for your header and in the custom CSS section under the main element, add the following: display: flex; that will get the elements side by side. I ran into the same problem.
Thank you for the video. I went ahead and followed the video but noticed that when i refresh or switch pages the I see all 3 headers for a brief moment. I went and I hid section/row/columns/menu add 99999 z index and still same results. Is this normal? Is there a fix you recommend?
Why don't you just make the header settings in the theme costumizer available for phone and tablet too? It would be much easier. I can't get this to work in any way. Tried several times. Otherwise, I'm very happy about the Divi theme:)
Thank you for you video. I do have a question. I am struggling to customise to mobile. I want the menu to the right, logo in the middle, and call to action to the left but inline and with 3 different sections it is not aligning if that makes sense? Could you help me please? I tried the code you gave us align-items:center. still not working the header is just a mess :( . Thank you in advance!!!
Mak i need your help really! I make two headers but when i put my internet explorer on width 767px the two headers are visible, only in this point. Can you help me whit that? Sorry for my english and thanks!
Thanks for the video! However I also find that the header I built is off centered even when the columns are of equal size. Also can a menu be built that has content below so you know how to adjust it. I have a gradient effect and the fixed header breaks the flow above the Hero element. Doing things in isolation does not give a true reflection of how the page will turn out.
Drop down is not working. Menu is not showing above everything which you said at 12.35 minutes . what should I do now ? Please tell me, I need to develop it.
That’s very helpful Mak. Thank you. The burger looks a bit silly on an iPad. How can you easily keep the full menu at the tablet size? Where is the correct place to override the built in media queries?
this is a good question. divis tablet media query breaks at 980 pixels. so at 981 it is still in “desktop” viewport. i would love to know how to change divis built in “tablet” and “iphone” media queries.. to just be able to click the phone and tablet buttons on theme builder at whatever desired pixel width i set. sometimes your header needs more menu items/buttons/call 2 actions which leaves you wanting to set your breakpoints at a much earlier width than divis 980 pixels... tbh if this was implemented... it would be a game changer for me... and might even consider purchasing divi.
@@ManuelFernandez-vl6ty Its so frustrating that it gives the impression it looks fine on tablet and mobile in the visual builder until you actually have a look on some screen sizes. Someone needs to do an in-depth tutorial on inspect element and how to optimise things for all screen sizes
MaK, how do you make such header but transparent, so the photo from the page background (or page background color/gradient/video) actually goes under the header??
One would think you'd mention that to keep everything in line, you have to use a bit of code to do it. I mean great video but it's not newbie-friendly.
@Farjana Rashid maine Header Create Kia Services 1-Books 2-Accounting 3-Payroll I want To active My 3 Sub Menus But I Dont Want Service Page to Be Clickable. Any Idea How to Do It ?
Thank you MAK for the content. I am unable to edit designs separately for mobile, desktop and tablet. Even If I click on the mobile icon and edit, it still alters the desktop design. What am I doing wrong? Please help.
Great video - a tiny bit too fast for my taste, and erratic mouse movements without a mouse highlighter is very hard to follow. But good video and thank you for the tips. Just one question - can you get rid of the hamburger icon in tablet and phone, and just make two links - and let the logo take you to home? - i think the hamburger icon is unnecessary when you only have to links.
Bad solution! Loading more content than needed? No thanks. Why is there no media query function that we can see in the visual editor? I just want it to be set to desktop, design the menu, then set it to tablet/mobile and design it differently. When I bought Divi I thought all of this was included, yet I keep running into this kind of time consuming stuff that just slow down my process as well as the speed of my websites.
I agree. This method is nice but it's full of bugs. mine shows 3 headers, even when disabling on different type of devices. It still shows every header I make.
It seems like the logo and the hambrgr is not in the same line for Tablet and Mobile view. You have made so many videos on making a Header and no one of those videos are perfect. They always had some flaws. I learnt a lot from you, I am thankful for that. However, as an user I am not happy the way you handled Navigation Bar.
I am so glad I found this! I always follow your videos, and I haven’t done a new website in a while, and I suddenly couldn’t remember how to alter the headers and footers for tablets and phone. You’re the best!❤
Thank you 😀
You can change your viewport in the Chrome inspector window by selecting the dropdown above the web page. During your video, your selection was set to Responsive. This gives you a handle on the side of your website so you can drag and change the width of your viewport. Selecting a cell phone or tablet is as easy as selecting the dropdown from Responsive to iPad, iPhone, or Android. You can even create your own custom viewport to target specific mobile devices.
Mac we appreciate I appreciate what you do here and that’s why it irks me to be negative here but making three headers, WILL bog your site down. this is not good advice, there’s better ways around it ... for what it’s worth it’s good to know but not useable in a professional setting. imagine loading up the same header , 3 different times. two times if you really need, is best practice NOT 3 headers .
Smart. I like the idea of doing 3 separate headers. Thank you
Solid content Mak, however in tablet and mobile view the columns are off center. How do we fix this? Thanks
OK, what am I missing. I build my header menu in the theme builder, but when I look at it on Tablet and Phone the 2 rows are stacked one atop the other...yours is nicely positioned side by side
go to the row for your header and in the custom CSS section under the main element, add the following:
display: flex;
that will get the elements side by side. I ran into the same problem.
@@KarateAmericaBoulder 🙏
Sir your tutorial is best and teaching style is awesome
GREAT and very helpfull video abort the header in mobil devices.
THANKS🙏
Thank you for the video. I went ahead and followed the video but noticed that when i refresh or switch pages the I see all 3 headers for a brief moment. I went and I hid section/row/columns/menu add 99999 z index and still same results. Is this normal? Is there a fix you recommend?
Love all your tutorials, thank you so much!
Why don't you just make the header settings in the theme costumizer available for phone and tablet too? It would be much easier. I can't get this to work in any way. Tried several times. Otherwise, I'm very happy about the Divi theme:)
Thank you for you video. I do have a question. I am struggling to customise to mobile. I want the menu to the right, logo in the middle, and call to action to the left but inline and with 3 different sections it is not aligning if that makes sense? Could you help me please? I tried the code you gave us align-items:center. still not working the header is just a mess :( . Thank you in advance!!!
Mak i need your help really! I make two headers but when i put my internet explorer on width 767px the two headers are visible, only in this point. Can you help me whit that?
Sorry for my english and thanks!
Thanks for the video!
However I also find that the header I built is off centered even when the columns are of equal size. Also can a menu be built that has content below so you know how to adjust it.
I have a gradient effect and the fixed header breaks the flow above the Hero element.
Doing things in isolation does not give a true reflection of how the page will turn out.
Drop down is not working. Menu is not showing above everything which you said at 12.35 minutes . what should I do now ? Please tell me, I need to develop it.
You are a BOSS Mak...
Awesome 🙏
That’s very helpful Mak. Thank you. The burger looks a bit silly on an iPad. How can you easily keep the full menu at the tablet size? Where is the correct place to override the built in media queries?
this is a good question. divis tablet media query breaks at 980 pixels. so at 981 it is still in “desktop” viewport. i would love to know how to change divis built in “tablet” and “iphone” media queries.. to just be able to click the phone and tablet buttons on theme builder at whatever desired pixel width i set. sometimes your header needs more menu items/buttons/call 2 actions which leaves you wanting to set your breakpoints at a much earlier width than divis 980 pixels... tbh if this was implemented... it would be a game changer for me... and might even consider purchasing divi.
@@ManuelFernandez-vl6ty Its so frustrating that it gives the impression it looks fine on tablet and mobile in the visual builder until you actually have a look on some screen sizes. Someone needs to do an in-depth tutorial on inspect element and how to optimise things for all screen sizes
Dont know where I went wrong but all I get is a single column a mile long ?/?/ Not 4 columns no matter how I arrange the menu.
MaK, how do you make such header but transparent, so the photo from the page background (or page background color/gradient/video) actually goes under the header??
Muy bueno el tutorial Mak! Muchas gracias
hi Mak, when I enter tablet or phone mode the menu block goes under the logo and not to the left, why? thank you very much
Good video Mak, but the logo in the tablet and mobile version was off centered.
I'm having an issue where the duplicated sections mimic each others changes. How do I get around this?
One would think you'd mention that to keep everything in line, you have to use a bit of code to do it.
I mean great video but it's not newbie-friendly.
But want to ask in mobile device header menu drop-down is not aligned on full width of device. How can we do it..
This helps SOOO much!
@Farjana Rashid maine Header Create Kia
Services
1-Books
2-Accounting
3-Payroll
I want To active My 3 Sub Menus But I Dont Want Service Page to Be Clickable. Any Idea How to Do It ?
why isnt this native in the divi primary menu adjustments ?
Thank you MAK for the content.
I am unable to edit designs separately for mobile, desktop and tablet. Even If I click on the mobile icon and edit, it still alters the desktop design.
What am I doing wrong? Please help.
Same
Great video - a tiny bit too fast for my taste, and erratic mouse movements without a mouse highlighter is very hard to follow. But good video and thank you for the tips.
Just one question - can you get rid of the hamburger icon in tablet and phone, and just make two links - and let the logo take you to home? - i think the hamburger icon is unnecessary when you only have to links.
Hi Mak, you forgot to fix the icon problem. How can I solve the position problem?
Well the Logo Don t fit well on Phone
I know understand the people that say DIVI is garbage.
Only be “seen”? Not loaded?
Show!
All your videos are so obvious, 0 value. Stop record standard features!!!