Hannah Callahan commenting on the Divi blog site has suggested a fix for the landscape phone menu viewing problem. Visibility Settings > set the *Vertical Overflow* to *Scroll*. Now the full menu is accessible on a landscape phone! (I'm still getting used to all these new advanced changes in the Divi modules. So much so fast!) Thank you, Hannah!
The ending is very very important for those who don't code (most people that are using Divi as a visual builder) you need to type then post the code in-between the two style tags that appear. If you do miss this step as its not really shown clearly.. nothing works
Building a manual menu is counter productive. WordPress has a built-in menu feature that allows you to create menus/dropdowns and place the entire menu in your content. ET should be promoting the use of WP menus for this and adjusting Divi's overrides to make the menu visible and slide in. That way, users can update the menu on the fly without having to manually add text items in a layout. I will be providing a tutorial soon on this and will update my comment when it is ready.
Thank you for the video. PS: For testing purposes, it would be nice to have your export file (from your blog) also as a simple page layout JSON for the header page (not as a file which only works as a global theme builder import that will override all other items in our existing divi theme builder instance). To make it work for me, I had to install a new WordPress instance with new Divi Theme, then import your global file. Make it non-global. Then enter the header in theme builder to save it as a "header page". Only then was I able to open it and import into my existing website (without at the same time overriding all my existing menus in the theme builder). Why not simply save your export file as non-global header page? 😅
I found a solution for what I was trying to do: When the user clicks the button, I wanted the page to scroll down to my contact form AND for the menu to close. To do this I changed the link to the button to #contact-form-section and of course set the contact form’s section CSS ID to ‘contact-form-section’ > which handled the scrolling. The I gave the button the CSS ID ‘menu-button-close’ and added the following code to the code module: jQuery( document ).ready( function($) { $('a#menu-button-close').on('click', () => { $('#slide-in-open').trigger('click'); }) } ); Hope that helps.
Hi Donjete, greate job. I love it! There is one issue thow. When refresh the page, a flash of the hamburgar menu is shown in the top of the page behind the menu section. Is there any fix for that?
Great tutorial on creating a slide element :) It's not a menu though, and does not apply the divi navigation. So far no one has solved the issue Divi has with mobile navigation compatibility . Is there absolutely no possibility to get a full navigation with sub-menu heiraki, in a responsive slide menu?
Hi thanks for this tutorial. I would really like the menu to close after the user have clicked on the anchor point. Did anyone find a solution for that?
I found a solution for what I was trying to do: When the user clicks the button, I wanted the page to scroll down to my contact form AND for the menu to close. To do this I changed the link to the button to #contact-form-section and of course set the contact form’s section CSS ID to ‘contact-form-section’ > which handled the scrolling. The I gave the button the CSS ID ‘menu-button-close’ and added the following code to the code module: jQuery( document ).ready( function($) { $('a#menu-button-close').on('click', () => { $('#slide-in-open').trigger('click'); }) } ); Hope that helps.
@@ozcodewebservices5464 Yo thanks for the code, but it doesnt seem to work... I changed the CSS ID to menu-button-close and pasted in the code but It doesnt close the Menu. The scrolling still works but it doesnt close. do you have a solution for that?
Hello, thanks for the Tutorial. I'm having an issue. When I scroll down my pages, the Menu does not open, it only opens when it's at the top of my pages.
Thanks for the tip! just a quick question...why do you put the css code and the jquery in the middle of the page? it´s because it´s a demo or it doesn´t really matter because divi handles the render of jquery at the buttom and css at the top ?
Thanks again for this post. The only issue I had was on one site: everything was there but on clicking the hamburger nothing happened! After much head scratching I figured there was some javascript code somewhere disabling the code to action the menu sliding in etc. Tracked it down to some code at the bottom of my old Child Theme functions php that was designed to defer the parsing of javascript… removed this and all is well! So if anyone sees this issue, that’s something to check… it looked like this: //==== Defer Parsing of JavaScript ======// function defer_parsing_of_js ( $url ) { if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return "$url' defer "; } add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
Great tutorial :) If I wanted to create a cascading slide out menu where a selected option, let's say "services" will pop out an additional pane with a "sub menu" is this possible / how would you do that?
hello there. First off thanks for the video, so i ran into an issue, when i go to the main site after editing, the slider starts on the very top and when the hurmberg icon is clicked it opens the menu fine but i can't click it again to close the slider since the slider is overlapping with the icon, i followed the steps exactly like you described but i am not sure why this happened. Any assist would be appreciated
I have this working perfectly except for one thing :-( When the menu is not active (closed), you cannot click on any items on the site where the menu would be if active. I assume it's because the menu is invisible and not really gone when not in use - Is there a way to fix this (Z indexing or something)?
It's not because of Z indexing. Solution: Go to the position section in advance tab of your row settings and set your horizontal offset value in negative % (not in px). Your problem would be solved.
Shame on Divi team. You guys couldn't give an option to create and edit a Slide-In menu through the settings of menu module. It's been 3 years since you created this video and you guys still haven't added the feature.
I want to make this toggle menu left side,and follow your video it also made ,but when i clicked in toogle menu all the content appears middle of the pge ,not in left side ,plz help me how I fixed.btw your video is so useful ..
Thanks for the tutorial. I have a problem. The hamburger menu disappears when the menu is opened. I've set the z-index to 9999 but still it's not shown. Any idea why?
Problem Solution! Problem: If someone is facing a problem relating to the menu like when the menu is not active (closed), one cannot click on any items on the site where the menu would be. It's because menu is just invisible and it's not really gone when not in use. Solution: Go to the position section in advance tab of your row settings and set your horizontal offset value in negative % (not in px). Your problem would be solved.
This is great, but how do you edit the menu items once we have created everything? The 2nd row module disappears because opacity at 0. So when needing to make a change, the module cannot be seen or clicked in the Theme builder? Only row 1 can be edited.
Hello, thanks a lot for this tutorial. I'm looking for how to add dropdown submenu in this slide-in menu. But I didn't find. Does somebody can help me ? REGARDS
Hello I can see menu sliding into position while loading the page, and I can see that on your side also at time 29:48 when you reload page. Can you help with that, please?
Hi, I am using custom font in divi theme , custom font is working properly when I enable visual builder, but it is not working when I exit visual builder. please guide me how to solve it?
When the user clicks the button, I wanted the page to scroll down to my contact form AND for the menu to close. To do this I changed the link to the button to #contact-form-section and of course set the contact form’s section CSS ID to ‘contact-form-section’ > which handled the scrolling. The I gave the button the CSS ID ‘menu-button-close’ and added the following code to the code module: jQuery( document ).ready( function($) { $('a#menu-button-close').on('click', () => { $('#slide-in-open').trigger('click'); }) } ); Hope that helps.
this tutorial didn't work at all. The code can not be pasted from the blog into the section you do here. It just appears as text and nothing happens. If i paste into the custom css section. Still nothing happens. Is there an update to this that has ruined it ?
maybe you should read it carefully on the blog. It is said you've to add this code between the correct style tag. You've to add the code provided for the css, and the script provided I hope it will help you.
@@SimonKling thanks Simon , I kind of got it to work but then other aspects were missing. I could seem to get any hover effects for the menu items. Words won’t even change colour on active state etc
Hi Carrie! 👋 You can download the Slide-in layout of the Menu and import it to your website through the Theme Builder: www.elegantthemes.com/blog/divi-resources/how-to-create-a-responsive-slide-in-menu-with-divis-theme-builder
What I did is to put the positioning location to the upper left (instead of upper right), and change the horizontal offset -80% on pc, -40% on mobile (I don't know on tablet, but should be -60%).
Sometimes Divi team do not think form customer perspective! They build Theme Builder which is great, but at Global Header section they do not think to add an option: Import current Header in use (Logo & Menu). Or Global Header to have included current Header Logo & Menu! And, which user want to build a template without Logo & menu?
Hi, I am using custom font in divi theme , custom font is working properly when I enable visual builder, but it is not working when I exit visual builder. please guide me how to solve it?
![Chris Langan - The Interview THEY Didn't Want You To See - CTMU [Full Version; Timestamps]](http://i.ytimg.com/vi/9miVG2xT5jY/mqdefault.jpg)
Divi really needs to add more options to its theme builder. We should not have to make custom edits to build what is otherwise a common navbar design.
I think so too. so many CSS editing, we have to watch so many tutorials to do different navbar etc...
Hannah Callahan commenting on the Divi blog site has suggested a fix for the landscape phone menu viewing problem. Visibility Settings > set the *Vertical Overflow* to *Scroll*. Now the full menu is accessible on a landscape phone! (I'm still getting used to all these new advanced changes in the Divi modules. So much so fast!) Thank you, Hannah!
The ending is very very important for those who don't code (most people that are using Divi as a visual builder) you need to type then post the code in-between the two style tags that appear. If you do miss this step as its not really shown clearly.. nothing works
Building a manual menu is counter productive. WordPress has a built-in menu feature that allows you to create menus/dropdowns and place the entire menu in your content. ET should be promoting the use of WP menus for this and adjusting Divi's overrides to make the menu visible and slide in. That way, users can update the menu on the fly without having to manually add text items in a layout. I will be providing a tutorial soon on this and will update my comment when it is ready.
Thank you for the video.
PS: For testing purposes, it would be nice to have your export file (from your blog) also as a simple page layout JSON for the header page (not as a file which only works as a global theme builder import that will override all other items in our existing divi theme builder instance).
To make it work for me, I had to install a new WordPress instance with new Divi Theme, then import your global file. Make it non-global. Then enter the header in theme builder to save it as a "header page". Only then was I able to open it and import into my existing website (without at the same time overriding all my existing menus in the theme builder).
Why not simply save your export file as non-global header page? 😅
Thank you Donjete ! Much value in this tutorial !
Thank you! So useful tutorial & so elegant result!!
Awesome! Glad it helped 😃
Pretty neat looking slide-in menu! Effect is shown at 3:28.
Excellent! how is it possible to make it close when one clicks on the anchor points? Thanks
I found a solution for what I was trying to do: When the user clicks the button, I wanted the page to scroll down to my contact form AND for the menu to close. To do this I changed the link to the button to #contact-form-section and of course set the contact form’s section CSS ID to ‘contact-form-section’ > which handled the scrolling. The I gave the button the CSS ID ‘menu-button-close’ and added the following code to the code module:
jQuery( document ).ready( function($) {
$('a#menu-button-close').on('click', () => {
$('#slide-in-open').trigger('click');
})
} );
Hope that helps.
Hi Donjete, greate job. I love it! There is one issue thow. When refresh the page, a flash of the hamburgar menu is shown in the top of the page behind the menu section. Is there any fix for that?
Hello... Did you get a solution for this problem? Because I am facing the same issue and I need some advice in rectifying it
did you find the solution about it
@@trueindianmotivations
Great tutorial on creating a slide element :) It's not a menu though, and does not apply the divi navigation. So far no one has solved the issue Divi has with mobile navigation compatibility . Is there absolutely no possibility to get a full navigation with sub-menu heiraki, in a responsive slide menu?
Great information! This can work for menu with submenu?
Hi thanks for this tutorial. I would really like the menu to close after the user have clicked on the anchor point. Did anyone find a solution for that?
I found a solution for what I was trying to do: When the user clicks the button, I wanted the page to scroll down to my contact form AND for the menu to close. To do this I changed the link to the button to #contact-form-section and of course set the contact form’s section CSS ID to ‘contact-form-section’ > which handled the scrolling. The I gave the button the CSS ID ‘menu-button-close’ and added the following code to the code module:
jQuery( document ).ready( function($) {
$('a#menu-button-close').on('click', () => {
$('#slide-in-open').trigger('click');
})
} );
Hope that helps.
@@ozcodewebservices5464 Yo thanks for the code, but it doesnt seem to work... I changed the CSS ID to menu-button-close and pasted in the code but It doesnt close the Menu. The scrolling still works but it doesnt close. do you have a solution for that?
Hi, beautiful tutorial, but if i have submenu? Can i use this fantastic solution? Thx!
Hello, thanks for the Tutorial. I'm having an issue. When I scroll down my pages, the Menu does not open, it only opens when it's at the top of my pages.
Thanks for the tip! just a quick question...why do you put the css code and the jquery in the middle of the page? it´s because it´s a demo or it doesn´t really matter because divi handles the render of jquery at the buttom and css at the top ?
Okay this is very good, thank you. But in my case i need to put a lot of menus on the menu and i cannot scroll it down, whats the problem?
Thanks again for this post. The only issue I had was on one site: everything was there but on clicking the hamburger nothing happened! After much head scratching I figured there was some javascript code somewhere disabling the code to action the menu sliding in etc. Tracked it down to some code at the bottom of my old Child Theme functions php that was designed to defer the parsing of javascript… removed this and all is well! So if anyone sees this issue, that’s something to check… it looked like this:
//==== Defer Parsing of JavaScript ======//
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
Great tutorial :) If I wanted to create a cascading slide out menu where a selected option, let's say "services" will pop out an additional pane with a "sub menu" is this possible / how would you do that?
I lost you on codes :) what is your basic lesson reccomendation for them ?? for ID and classes too , thanks for the content !
millionroots.com/
awesome... exactly what i need right now.
hello there. First off thanks for the video, so i ran into an issue, when i go to the main site after editing, the slider starts on the very top and when the hurmberg icon is clicked it opens the menu fine but i can't click it again to close the slider since the slider is overlapping with the icon, i followed the steps exactly like you described but i am not sure why this happened. Any assist would be appreciated
I figured out a way using z-index setting
I have this working perfectly except for one thing :-( When the menu is not active (closed), you cannot click on any items on the site where the menu would be if active. I assume it's because the menu is invisible and not really gone when not in use - Is there a way to fix this (Z indexing or something)?
following
It's not because of Z indexing.
Solution:
Go to the position section in advance tab of your row settings and set your horizontal offset value in negative % (not in px). Your problem would be solved.
Hey! I like your content!
it works perfectly, except we see briefly (half a second) the slide-in container when the page is loading. Is there any suggestion to fix it up !
Hi Baptiste! 👋
It's better to create a ticket with our Support Team for further investigation:
www.elegantthemes.com/members-area/
Shame on Divi team. You guys couldn't give an option to create and edit a Slide-In menu through the settings of menu module. It's been 3 years since you created this video and you guys still haven't added the feature.
Is it possible to leave the session that has the logo and icon fixed with a white background?
Thanks
Just a little bit issue
Please, How can I add a langual switcher
and a login button.
I want to make this toggle menu left side,and follow your video it also made ,but when i clicked in toogle menu all the content appears middle of the pge ,not in left side ,plz help me how I fixed.btw your video is so useful ..
Hello! Bottom of my pop-up menu goes under page body. How can i fix that?
I would like to add the drop-down menu to the main menu item with the collapsing effect. How to achieve that?
I used toggle sections.
Thanks for the tutorial. I have a problem. The hamburger menu disappears when the menu is opened. I've set the z-index to 9999 but still it's not shown. Any idea why?
Put CSS : slide-in-open on class not ID, It fixes my problem, good luck
Problem Solution!
Problem:
If someone is facing a problem relating to the menu like when the menu is not active (closed), one cannot click on any items on the site where the menu would be. It's because menu is just invisible and it's not really gone when not in use.
Solution:
Go to the position section in advance tab of your row settings and set your horizontal offset value in negative % (not in px). Your problem would be solved.
i would like the menu to go across the top not down the side. How do you make that happen with the hamburger menu?
This is great, but how do you edit the menu items once we have created everything? The 2nd row module disappears because opacity at 0. So when needing to make a change, the module cannot be seen or clicked in the Theme builder? Only row 1 can be edited.
you have to use the Wireframe View in your visual builder to see the 2nd row. The horizontal offset make it disappear.
Hello, thanks a lot for this tutorial.
I'm looking for how to add dropdown submenu in this slide-in menu. But I didn't find.
Does somebody can help me ?
REGARDS
So is there a way to have the active link in these menus in general Bold or highlighted?
Why isn‘t in working on product-pages in woocommerce? The Menu didn‘t slide in oder out
Hello
I can see menu sliding into position while loading the page, and I can see that on your side also at time 29:48 when you reload page.
Can you help with that, please?
did you find any answers about it, since i have the same problem now
Hi, am I missing anything - the menu wouldn't come back in after pressing the X (spans). The menu remains open. How do I fix this?
Hello Carmel! 👋
It needs further investigation, so please, create a ticket with the Support Team:
www.elegantthemes.com/members-area/
Hi, I am using custom font in divi theme , custom font is working properly when I enable visual builder, but it is not working when I exit visual builder. please guide me how to solve it?
how do i change the HAMBURGER menu color ?
how i can close it after navegate anchor menu items
three menu lines is not showing after applying CSS and script
Where can I find the JSON file of this header, please?
It stopped working on iPhone and Safari, why?
I can see menu sliding into position while loading the page, the menu link when the opacity is 0 its clickeable.... what a shame
The json file won't upload in the builder. Goes the header need to be 'global'?
Well tutorial, How to create dropdown menu?
How to disable the horizontal slider on post and category pages please?
If you need further help, you can open a chat with our support team: www.elegantthemes.com/members-area/help
How about using the menu in a landscape mode on mobile?
When the user clicks the button, I wanted the page to scroll down to my contact form AND for the menu to close. To do this I changed the link to the button to #contact-form-section and of course set the contact form’s section CSS ID to ‘contact-form-section’ > which handled the scrolling. The I gave the button the CSS ID ‘menu-button-close’ and added the following code to the code module:
jQuery( document ).ready( function($) {
$('a#menu-button-close').on('click', () => {
$('#slide-in-open').trigger('click');
})
} );
Hope that helps.
this tutorial didn't work at all. The code can not be pasted from the blog into the section you do here. It just appears as text and nothing happens. If i paste into the custom css section. Still nothing happens. Is there an update to this that has ruined it ?
maybe you should read it carefully on the blog. It is said you've to add this code between the correct style tag. You've to add the code provided for the css, and the script provided I hope it will help you.
@@SimonKling thanks Simon , I kind of got it to work but then other aspects were missing. I could seem to get any hover effects for the menu items. Words won’t even change colour on active state etc
I can't find the copy paste code for adding the code
how to slide in from the left?
can't find the slide menu,, disappear,,, why..? anyone can help?
Hi Carrie! 👋
You can download the Slide-in layout of the Menu and import it to your website through the Theme Builder:
www.elegantthemes.com/blog/divi-resources/how-to-create-a-responsive-slide-in-menu-with-divis-theme-builder
how to get hover over effects on the text menu? anyone can help?
How would I get it to work on the left side?
What I did is to put the positioning location to the upper left (instead of upper right), and change the horizontal offset -80% on pc, -40% on mobile (I don't know on tablet, but should be -60%).
Hi Where can we find this code ?
Hi there 👋 The code can be found in the Blog Post for this tutorial 😀
شكرا
Same problem. Its not working at all … one hour lost.
Does not work
Great tutorial... but the voice is very boring
OMG please! half an hour to make a menu! This ins't function AT ALL!!!!
Sometimes Divi team do not think form customer perspective! They build Theme Builder which is great, but at Global Header section they do not think to add an option: Import current Header in use (Logo & Menu). Or Global Header to have included current Header Logo & Menu! And, which user want to build a template without Logo & menu?
Even if you don't see the menu bar, you can click the Menu. This tutorial is useless.
bad exprience
waste of time
Hello, i have a issue. When i click on the hamburger the menu opens. But it is only visible in the header part. Not in the body.
Hi, I am using custom font in divi theme , custom font is working properly when I enable visual builder, but it is not working when I exit visual builder. please guide me how to solve it?