IThe tips in the video and the blog article didnt work for me. My solution in the end was this custom css combination: header.et-l.et-l--header { z-index: 9999 !important; position: relative !important; } body, div{ overflow:visible !important; } Hope this helps some of you.
Yes!!! Thank you König!!! I was having this problem with my WooCommerce product pages - the drop down menu selections were displaying behind the product content (making the menu items non-viewable/clickable). Plugging your CSS combo into the custom CSS of Divi did the trick! Thanks for sharing!
For the people that tried all the methods, in the video, in the post blog, the codes added by subscribers of this channel, and none of them worked, the problem still persisted, try to add " overflow:visible !important; " in the SECTION SETTINGS, not row, not module. If you modify the bottom padding of section and click on hamburg menu, you will see that the menu is opening as much you added padding. Instead have a huge bottom section padding, you can add that code in Custom CSS - Main Element and your problem is fixed. I have tried all the methods and this one worked for me. I hope my method will help those that have this issue.
Man, I tried everything everywhere else, and my menu module (not in header) was always going behind the lower sections. My dropdown in the header was already working correctly. This single setting fixed my issue with my additional menu module lower in the page content. I literally spent hours trying everything I could find/think of. After removing all my other edits and setting this on the offending Section, my menu drops down over the lower sections. Thanks a million!
I have only recently discovered the power of the theme builder, so I was pretty disappointed when this bug cropped up. You have saved the day! Thank you for this. And I am planning to buy your "Contact Forms Helper" module soon, as it sounds ideal for my needs. Keep up the great work!
Thanks for this suggestion. This was not working for me, but then I read in the comments that if you have multiple rows, then you would need to make the same modifications to visibility and position in the SECTION SETTINGS. I made those adjustments and it's all working well now. Thanks for this update.
Thank you for the help! As first this did not work, custom z-index ccs did not work too so i try to make the same changes in the section, then i win. So if anyone has the same problem and after adjusting row nothing happen, try to adjust the same visible setting for the section.
i got a funny tweaks also, there are two menu bars on the header, in this case you really need to also change the same about section settings on visibility and position, not just the row. also in this case, a setting on z-index difference would be helpful. but this video really helped :) thanks!
Thanks for the insights. I am trying to link to a Page Anchor using a Custom link Sub-menu in the top Navigation Bar. It's not working without breaking the Top Tier Link.
Has anyone had an issue where their submenu just doesn't even show up on mobile?? Like, all of the regular menu items, including the master item (Services), are there, but there is no option for the Services submenu to drop down. It's non-clickable because there is no Services page, instead there are the 3-4 pages for the specific services. So, yeah, looking everywhere to find a solution, driving me nuts because this doesn't seem to be an issue for most Divi users!
Yes! Great solve! Thanks a lot. Now I just need to find where I can change the text color and background color to the dropdown menu. Not sure Elegant Themes nailed the whole 'global' items yet.
question from a novice. I set up my website without using the Theme Builder so there is no menu option showing. I only see it under appearance. How can I make those changes?
I'm have this exact issue on a Divi website I've taken ownership of. The website uses a custom child theme. My problem is that the navigation bar is not in the 'Global Header' section so I can't adjust the settings to the row as described on the video. The odd thing is that if I go to 'Appearance > Customise' menu in the wordpress backend the mobile menu works. It has just stopped working on the front end. I've tried the code that Konig suggested but that didn't work either. Is there anything else I can try?
my footer menu isnt showing on divi. So tried ur method but the cursor doesnt even select anything to show me the options to go into opacity or anything
After making my mobile menu like the desktop menu view I found I couldn’t create a drop down on my blog link with the category links under it. It wouldn’t fit right on the mobile screen. Is there a fix or is it better to just not do that when using the desktop menu layout on mobile instead to the default mobile menu .?
I’m having an issue with my Mobile menu. When you click to open the sub menu items the menu disappears but when you click on the menu again they are showing, which is not ideal. Any suggestions?
Hi Nelson thanks for the video, the code function is perfect for me in the desktop version, but still not working for me in a mobile version, you have some idea what can I do? Thanks
How do you change the BORDER color of the drop-down menu when using theme builder? I know how to do it through settings > customize > header and navigation when you are NOT using theme builder, but that menu goes away when theme builder is in place. Do you just have to use custom css? Very strange.
Thank you for your tutorial on menus. I have almost used all of then on my website. I tried couple of them form other videos, but did not work. is there way I can collapse the sub menu by default in Mobile view. like how you have it in your website. Currently I am having the looks how its in this current demo. Can u help?
Hey there, that's really cool feedback! Yes, I'm going to try very hard to get a big tutorial out on next on the mobile menu. It's going to be a long one but it will have that in it.
HELP, My problem is a bit different. I used the Divi contact form and created an application form that has State and Industry DropDown fields. I made it live but realized those 2 fields just loop back and reload the page when clicked on. The rest of the form is fine. I've spent all day, and last night searching youtube and google and can't find anything that addresses this problem. I just tried your fix above just cause, and it doesn't work, but would you please be able to help me. I am New to WordPress maybe the state fields should be inputted in a different field type?? I manually entered each state so It's upsetting that it didn't work and there are no videos or posts on how to do this step Would love some advice on how to fix this problem. Thank YOU!
Hi there, I see this question is not related to the video, so I would suggest asking your question in a Divi Facebook group such as our Divi Teacher group to get answers for questions like that! Thanks
Hi Sebastian, that sounds strange, and a different issue than what is addressed here. You should check the z-index of the sections, check for any transforms, negative margins, etc. And after that, reach out to Elegant Themes.
I've been playing with my header. 3 columns. Logo/menu/smicons. The menu suddenly appeared on two lines. As I fiddled with the settings, the whole menu disappeared. I have no drop-down menus.
What are the 3's about in the menu that show up as you load your homepage in this? I get this sometimes when I load my page and it actually stays. How do I fix this?
The 3 is the built in Divi icon code for the drop-down icon. Sometimes depending on hosting it will persist. Make sure you are using a good host and have all green dots in Divi support center.
Hi Nelson, thanks! I used to ensure these steps: 1. visibility, 2. relative, 3. Z index, 4. Custom CSS display: flex; and works full visible dropdown, but in spite of all these the imported WP files with DIVI Jason full global settings jason file not showing the full dropdown, i mean invisible behind the next module! Any way out? Thanks in advance!
I just found another solution, I tried all of them and they served me but I created a menu again and they did not work again. The solution I found was to add "overflow: visible" in the css main element of the section (blue)
My problem is... When I click the hamburger icon in mobile, everything looks fine and all the links work but one link is not working - You can see that the text on the page is going through the letters of the page link. So, I am unable to click on that link. But if I go to another page where there is no text and open the menu again, it is clickable. I hope that makes sense. Im not sure why there is text from my page going through my menu. Its transparent
Hi Micheal, by default the dropdown menu has a transparent background so you may need to set a color in the Menu module. I assume that is what you are describing.
@@PeeAyeCreative Its not the background, but the actual text. I changed the background to white (as I want it). The text on the page is not visible in the menu, but is only visible when it is behind the text menu. The menu text is black and there should be no transparency.
Thank you very much ! I tried to make the tutorial but i didnt found ¨Position¨ so i looked in the blog and it workd to me the code in Divi-Theme options -custom css header.et-l.et-l--header { z-index: 99999; position: relative; }
Well neither of the solutions worked for me (I have both the video tutorial solution as well as the blog post solution in affect and the submenu is still not appearing). This isn't the first time I've encountered this problem either with the use of the Theme Builder (shame on you ET). To give you more info: Fixed header section, Top/Bottom Margin/Padding: 0; Z-index: 99999; Overflows are Hidden (because of the way I have my header designed). Row values: 3 Column, Gutter: 1, Width/Max-Width: 100%; Top/Bottom Margin/Padding: 0; Overflow: visible; Position: Relative. Display: flex!important; The modules inside don't have any specifics that would cause the submenu to hide.
Did you try the CSS snippet at the end of the blog post? People say that works 100%. Also, Divi seems to claim they fixed this with 4.4.2, but I'm skeptical since this is the 4th time they said that.
@@PeeAyeCreative Thank you for your reply. Yes, I did use the header.et-l.et-l--header { z-index: 99999; position: relative; } which didn't do anything. The submenu item still gets cut off.
Thank you for your useful video and blog post! I’m new to Divi and you’ve been very helpful!!! I didn’t really work for me though unfortunately for this problem... it doesn’t even show hamburger menu for me. It shows fine on Divi menu builder, but doesn’t show on the actual mobile screen (or mobile screen setting on PC). It even shows on source code that it has a menu but just doesn’t show the menu at all... Sorry to bother you but would you be able to advice me please. Here is the link to the website I’m working on... kitchengardenjp.com
IThe tips in the video and the blog article didnt work for me. My solution in the end was this custom css combination:
header.et-l.et-l--header {
z-index: 9999 !important;
position: relative !important;
}
body, div{
overflow:visible !important;
}
Hope this helps some of you.
Thanks for sharing, for some reason it seems slightly different for everyone.
Yes!!! Thank you König!!! I was having this problem with my WooCommerce product pages - the drop down menu selections were displaying behind the product content (making the menu items non-viewable/clickable). Plugging your CSS combo into the custom CSS of Divi did the trick! Thanks for sharing!
Thank you so freaked much!!!!
Thank you, this method worked for me! These bugs things can really frustrate!
Ein wahrer König! ;) Thanks a lot - that helped!
For the people that tried all the methods, in the video, in the post blog, the codes added by subscribers of this channel, and none of them worked, the problem still persisted, try to add " overflow:visible !important; " in the SECTION SETTINGS, not row, not module.
If you modify the bottom padding of section and click on hamburg menu, you will see that the menu is opening as much you added padding. Instead have a huge bottom section padding, you can add that code in Custom CSS - Main Element and your problem is fixed.
I have tried all the methods and this one worked for me.
I hope my method will help those that have this issue.
Thank you for sharing!
This absolutely fixed the issue for me! Thanks!!!!!
Man, I tried everything everywhere else, and my menu module (not in header) was always going behind the lower sections. My dropdown in the header was already working correctly. This single setting fixed my issue with my additional menu module lower in the page content. I literally spent hours trying everything I could find/think of. After removing all my other edits and setting this on the offending Section, my menu drops down over the lower sections. Thanks a million!
After trying all the suggestions, finally the CSS code snippet from your blog post solved the issue. BIG THANK YOU all the way from Switzerland.
I have only recently discovered the power of the theme builder, so I was pretty disappointed when this bug cropped up. You have saved the day! Thank you for this.
And I am planning to buy your "Contact Forms Helper" module soon, as it sounds ideal for my needs. Keep up the great work!
I'm so glad this helped! Let us know if you have any questions!
Thankfully this was the first result I found and my issues is now sorted. I think you just saved me a bunch of time.
Very good to hear, glad I could help!
Thanks for this suggestion. This was not working for me, but then I read in the comments that if you have multiple rows, then you would need to make the same modifications to visibility and position in the SECTION SETTINGS. I made those adjustments and it's all working well now. Thanks for this update.
Thank you for the help! As first this did not work, custom z-index ccs did not work too so i try to make the same changes in the section, then i win. So if anyone has the same problem and after adjusting row nothing happen, try to adjust the same visible setting for the section.
Thanks for sharing!
@@PeeAyeCreative Welcome Pee_Aye, you do awesome work for beginers, i always come back XD
this worked for me thank you 🙏
For everyone that's still having problems, try this code: body, div{overflow:visible;} - this worked for me. It was hidden before.
Thanks, they keep saying they update this (like 4 times in the changelog) so I don't even know anymore :)
i got a funny tweaks also, there are two menu bars on the header, in this case you really need to also change the same about section settings on visibility and position, not just the row. also in this case, a setting on z-index difference would be helpful. but this video really helped :) thanks!
It definitely depends, everyone is reporting different things.
Thanks Yu Hu. This was my issue as well. Had to make the same modifications in the Section Settings
Setting the visibility on a global menu row fixed the problem I was having. Thank you!!!
That's great Jackie!
Thank you for your help.
But Its not working for my case. Still the dropdown menu is behind my full-width slider.
Hi Prasanth, please take a look at the linked blog post for more solutions!
same for me, the code worked :
header.et-l.et-l--header {
z-index: 99999;
position: relative;
}
This is really awesome. This is what I’m looking for today and when I open TH-cam this is the first video comes up. Thank you awesome nelson
That's so cool, I'm glad you found this so easily!👍
Thanks for the insights. I am trying to link to a Page Anchor using a Custom link Sub-menu in the top Navigation Bar. It's not working without breaking the Top Tier Link.
i would like to see more tutorials on tuning divi with page speed insights. example would be ..disabling passive listeners on scroll
Noted!
Applying this solution to the row settings didn't quite do the trick for me. But...I tried the same solution at the section level, and ta-da!
Seems like it is different for everyone.
Has anyone had an issue where their submenu just doesn't even show up on mobile?? Like, all of the regular menu items, including the master item (Services), are there, but there is no option for the Services submenu to drop down. It's non-clickable because there is no Services page, instead there are the 3-4 pages for the specific services. So, yeah, looking everywhere to find a solution, driving me nuts because this doesn't seem to be an issue for most Divi users!
I have the same problem :(
Don't work on my website, any suggestion please?
Yes! Great solve! Thanks a lot. Now I just need to find where I can change the text color and background color to the dropdown menu. Not sure Elegant Themes nailed the whole 'global' items yet.
Hi David, those settings are in the Menu module under Menu Text
question from a novice. I set up my website without using the Theme Builder so there is no menu option showing. I only see it under appearance. How can I make those changes?
I'm have this exact issue on a Divi website I've taken ownership of. The website uses a custom child theme. My problem is that the navigation bar is not in the 'Global Header' section so I can't adjust the settings to the row as described on the video. The odd thing is that if I go to 'Appearance > Customise' menu in the wordpress backend the mobile menu works. It has just stopped working on the front end. I've tried the code that Konig suggested but that didn't work either. Is there anything else I can try?
my footer menu isnt showing on divi. So tried ur method but the cursor doesnt even select anything to show me the options to go into opacity or anything
After making my mobile menu like the desktop menu view I found I couldn’t create a drop down on my blog link with the category links under it. It wouldn’t fit right on the mobile screen. Is there a fix or is it better to just not do that when using the desktop menu layout on mobile instead to the default mobile menu .?
Thanks for that! great tutorial, saved me a lot of time going through loads of threads :)
You're welcome, that's how I try to make all my tutorials!
Sweet!! it TOTALLY worked!!!! Thanks a TON!!!
I'm so glad to hear it!
Thanks Nelson. Its a great trick for this problem.
Have a nice day.
Yes, I'm so relieved to have this solution after so much hassle!
I’m having an issue with my Mobile menu. When you click to open the sub menu items the menu disappears but when you click on the menu again they are showing, which is not ideal. Any suggestions?
Hi Nelson thanks for the video, the code function is perfect for me in the desktop version, but still not working for me in a mobile version, you have some idea what can I do?
Thanks
Another brilliant tutorial. This helped me so much. Thank you :)
You're very welcome!
Hey Nelson Miller you just rocked! You saved my time, I appreciate you alot, keep doing this great work, may god bless you :)
Thank you so much! I really love getting feedback like that from people like you! I will keep it up!
amazing. was pulling my hair out for an hour on this one
This is great content. I must appreciate.
Thank you!
Love You ❤ Thanks for help!
How do you change the BORDER color of the drop-down menu when using theme builder? I know how to do it through settings > customize > header and navigation when you are NOT using theme builder, but that menu goes away when theme builder is in place. Do you just have to use custom css? Very strange.
All the design settings are in the Menu module.
@@PeeAyeCreative Oh, sure enough. Thank you!
Thank you for your tutorial on menus. I have almost used all of then on my website. I tried couple of them form other videos, but did not work.
is there way I can collapse the sub menu by default in Mobile view. like how you have it in your website. Currently I am having the looks how its in this current demo. Can u help?
Hey there, that's really cool feedback! Yes, I'm going to try very hard to get a big tutorial out on next on the mobile menu. It's going to be a long one but it will have that in it.
@@PeeAyeCreative Thanks a Ton. You have made my life easy.
HELP, My problem is a bit different. I used the Divi contact form and created an application form that has State and Industry DropDown fields. I made it live but realized those 2 fields just loop back and reload the page when clicked on. The rest of the form is fine. I've spent all day, and last night searching youtube and google and can't find anything that addresses this problem. I just tried your fix above just cause, and it doesn't work, but would you please be able to help me. I am New to WordPress maybe the state fields should be inputted in a different field type?? I manually entered each state so It's upsetting that it didn't work and there are no videos or posts on how to do this step Would love some advice on how to fix this problem. Thank YOU!
Hi there, I see this question is not related to the video, so I would suggest asking your question in a Divi Facebook group such as our Divi Teacher group to get answers for questions like that! Thanks
That works, but my issue is that my header shows behind my page's content as if it was on a layer below
Hi Sebastian, that sounds strange, and a different issue than what is addressed here. You should check the z-index of the sections, check for any transforms, negative margins, etc. And after that, reach out to Elegant Themes.
I've been playing with my header. 3 columns. Logo/menu/smicons. The menu suddenly appeared on two lines. As I fiddled with the settings, the whole menu disappeared. I have no drop-down menus.
This was exactly what i needed, thanks
Awesome!
Just go to icon and check the Hamburger and add color to it. It maybe in transparent that's why you thought it disappear. Welcome
The issue mentioned in the video is different, but thanks for sharing!
oh that was an easy one for something that was a real pain !!! ;-) Thanks !
That's great Miles, I'm happy it was easy to do!
What are the 3's about in the menu that show up as you load your homepage in this? I get this sometimes when I load my page and it actually stays. How do I fix this?
The 3 is the built in Divi icon code for the drop-down icon. Sometimes depending on hosting it will persist. Make sure you are using a good host and have all green dots in Divi support center.
Hi Nelson, thanks! I used to ensure these steps: 1. visibility, 2. relative, 3. Z index, 4. Custom CSS display: flex; and works full visible dropdown, but in spite of all these the imported WP files with DIVI Jason full global settings jason file not showing the full dropdown, i mean invisible behind the next module! Any way out? Thanks in advance!
Hi there, I'm not sure what you mean. Can you show me? Also be sure to check the blog posts for the CSS snippet that solves this.
I just found another solution, I tried all of them and they served me but I created a menu again and they did not work again. The solution I found was to add "overflow: visible" in the css main element of the section (blue)
Glad you got it solved!
This is the only thing that worked for me. Thank you!
I had to go into the section setting and do this. The row didn't work but same process
It seems to be a little different for everyone.
My problem is... When I click the hamburger icon in mobile, everything looks fine and all the links work but one link is not working - You can see that the text on the page is going through the letters of the page link. So, I am unable to click on that link. But if I go to another page where there is no text and open the menu again, it is clickable. I hope that makes sense.
Im not sure why there is text from my page going through my menu. Its transparent
Hi Micheal, by default the dropdown menu has a transparent background so you may need to set a color in the Menu module. I assume that is what you are describing.
@@PeeAyeCreative Its not the background, but the actual text. I changed the background to white (as I want it). The text on the page is not visible in the menu, but is only visible when it is behind the text menu. The menu text is black and there should be no transparency.
Hello, I've tried everything in this tutorial and others but nothing seems to be working. Any ideas?
Hi there, have you tried the z-index fix that is included on the blog post? That will work!
Thank you very much ! I tried to make the tutorial but i didnt found ¨Position¨ so i looked in the blog and it workd to me the code in Divi-Theme options -custom css
header.et-l.et-l--header {
z-index: 99999;
position: relative;
}
Awesome, glad you found the snippet in the blog post!
Thanks, Boss! Big help
No problem!
I am using Wordpress and i have same problem. Can you help?
Hi Pupinder, have you watched the video and read the blog post? That's how I can help! ;)
I like you, you are good :) Thank you for help!
Happy to help!
Awesome! worked like a charm TY
You're welcome!
please how do i enter the row i can see the place please help
No idea?
You Are a Rock Star... Thank you.......... YAY
Worked, thanks
You're welcome!
I love you man
Thank you 😊
Thanks you a lot !
You're welcome!
Thank you!
You're welcome!👍
thanks for the effort, it didnt work for me
It should! Did you go to the blog post and try the z-index fix? That works for everyone.
THANK YOU THANK YOU THANK YOU!!!!!
You're welcome! 🙂
This solution not worked for me, can you help me please.
Yes I can take a look at it, please send a link.
sweetedibleprint.com/product/single-favor-box/
@@sweetedibleprintinfo8141 Hi Nancy, sorry I missed your comment but it looks like you go it!
@@PeeAyeCreative Did you guys manage to fix it cause I have the same problem...
@@ekvinox There's nothing that needs fixed that I'm aware of. Have you tried the z-index fix on the blog post? That should work! If not, let me know!
Hello, none of the following solutions worked for me. If anyone can help!
Hi Tony, could you check the blog post? We have some more solutions there and in the comments.
@@PeeAyeCreative Hi, I have tried all the solutions there and still not working.
You the best!
Glad you think so, thanks! :)
Thank you!!!!
You're welcome!
wow thanks!
No problem!
Thank you, it works :) Yeeee
I understand the feeling! :)
@@PeeAyeCreative Yeah the feeling! rocking your hands in the air :)
Well neither of the solutions worked for me (I have both the video tutorial solution as well as the blog post solution in affect and the submenu is still not appearing). This isn't the first time I've encountered this problem either with the use of the Theme Builder (shame on you ET).
To give you more info:
Fixed header section, Top/Bottom Margin/Padding: 0; Z-index: 99999; Overflows are Hidden (because of the way I have my header designed).
Row values: 3 Column, Gutter: 1, Width/Max-Width: 100%; Top/Bottom Margin/Padding: 0; Overflow: visible; Position: Relative. Display: flex!important;
The modules inside don't have any specifics that would cause the submenu to hide.
Did you try the CSS snippet at the end of the blog post? People say that works 100%. Also, Divi seems to claim they fixed this with 4.4.2, but I'm skeptical since this is the 4th time they said that.
@@PeeAyeCreative Thank you for your reply. Yes, I did use the
header.et-l.et-l--header {
z-index: 99999;
position: relative;
}
which didn't do anything. The submenu item still gets cut off.
thanks
Thank you for your useful video and blog post! I’m new to Divi and you’ve been very helpful!!!
I didn’t really work for me though unfortunately for this problem... it doesn’t even show hamburger menu for me. It shows fine on Divi menu builder, but doesn’t show on the actual mobile screen (or mobile screen setting on PC).
It even shows on source code that it has a menu but just doesn’t show the menu at all... Sorry to bother you but would you be able to advice me please.
Here is the link to the website I’m working on...
kitchengardenjp.com
Hi Moe, I'm not sure what you mean, I do see your menu. Could you explain again?