How to Create a Responsive Slide-In Menu with Divi’s Theme Builder

Подписаться 205 тыс.

Просмотров 37 тыс.

50% 1

When setting up a website for a client of yourself, you’ll find yourself contemplating what type of header to build. The most used one around the web is the horizontal menu bar at the top, but there are other options as well, such as a slide-in menu. Slide-in menus help you limit the space that’s taken up by the global header. Rather than show all your menu items right off the bat, you can let a slide-in menu appear when your visitors click on the hamburger icon in the top right corner. Using a slide-in menu helps you add additional interaction to your website.
In today’s use case Divi tutorial, we’ll show you how to create one using Divi’s Theme Builder, the built-in Divi elements and some additional code. The design of this slide-in menu matches the Yoga Instructor Layout Pack perfectly but you’re free to modify it to match any website you build. You’ll be able to download the JSON file for free as well!
Go to the blog post:
www.elegantthe...
Download the Yoga Instructor Layout Pack:
www.elegantthe...
If you don't have Divi yet, you can learn more about this powerful theme on our website using the link below:
www.elegantthe...
Want to give back to the community? Share your empowering knowledge, skills, experience, and creativity on the Elegant Themes blog by contributing:
www.elegantthe...

Опубликовано:

16 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 95

@lordmasterization 2 года назад

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.

@alinelevant1974 Год назад

I think so too. so many CSS editing, we have to watch so many tutorials to do different navbar etc...

@KerrieRedgate 4 года назад

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!

@nevergravity 2 года назад

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.

@lucmaradan4370 5 месяцев назад

Thank you Donjete ! Much value in this tutorial !

@spitsparrow 3 года назад

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

@GeorgeRamrod 3 года назад

Thank you! So useful tutorial & so elegant result!!

@elegantthemes 3 года назад

Awesome! Glad it helped 😃

@invictuz4803 4 года назад

Pretty neat looking slide-in menu! Effect is shown at 3:28.

@menzothefirst 2 года назад

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?

@fso. 3 года назад

Excellent! how is it possible to make it close when one clicks on the anchor points? Thanks

@ozcodewebservices5464 3 года назад

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.

@KevinToney 3 года назад

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.

@bilalfakhro1363 2 года назад

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?

@trueindianmotivations 2 года назад

Hello... Did you get a solution for this problem? Because I am facing the same issue and I need some advice in rectifying it

@FMLyrics Год назад

did you find the solution about it @@trueindianmotivations

@dorthedee3735 3 года назад

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?

@ozcodewebservices5464 3 года назад

@julius8439 2 года назад

@@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?

@iant9053 Год назад

I can see menu sliding into position while loading the page, the menu link when the opacity is 0 its clickeable.... what a shame

@spitsparrow 3 года назад

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 ?

@SimonKling 3 года назад

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.

@spitsparrow 3 года назад

@@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

@davidefisciano4144 Год назад

Hi, beautiful tutorial, but if i have submenu? Can i use this fantastic solution? Thx!

@NarenA Год назад

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.

@dandrimontp 3 года назад

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

@EinoAalto Год назад

Hello! Bottom of my pop-up menu goes under page body. How can i fix that?

@marymaryl972 Год назад

Great information! This can work for menu with submenu?

@jollystuff6775 4 года назад

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 ?

@farhan-app 4 года назад

Awesome video - need more modal tutorials!

@Habitosdelbalon 2 года назад

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?

@Vanderful_life 4 года назад

I lost you on codes :) what is your basic lesson reccomendation for them ?? for ID and classes too , thanks for the content !

@Vanderful_life 4 года назад

millionroots.com/

@Dapalmas- 2 года назад

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.

@jesseboyer5698 4 года назад

awesome... exactly what i need right now.

@gaov91 4 года назад

how i can close it after navegate anchor menu items

@palmettomediacompany 4 года назад

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)?

@webcraft7125 3 года назад

following

@nabeelahmad8453 2 года назад

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.

@animarseestudiocreativo4605 4 месяца назад

It stopped working on iPhone and Safari, why?

@denelan 4 года назад

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?

@حقوقي-ذ9د 4 года назад

Put CSS : slide-in-open on class not ID, It fixes my problem, good luck

@shivanandprasad5747 3 года назад

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 ..

@CarlosHenriqueEmsters 3 года назад

Is it possible to leave the session that has the logo and icon fixed with a white background?

@GiovanniRossi666 3 года назад

Why isn‘t in working on product-pages in woocommerce? The Menu didn‘t slide in oder out

@hollybaker5626 2 года назад

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?

@heathercolby3110 3 года назад

i would like the menu to go across the top not down the side. How do you make that happen with the hamburger menu?

@mdashikmian2895 3 года назад

Well tutorial, How to create dropdown menu?

@khushboomittal3664 Год назад

three menu lines is not showing after applying CSS and script

@Pingwinable 3 года назад

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 !

@elegantthemes 3 года назад

Hi Baptiste! 👋 It's better to create a ticket with our Support Team for further investigation: www.elegantthemes.com/members-area/

@lezdotechmed 4 года назад

I would like to add the drop-down menu to the main menu item with the collapsing effect. How to achieve that?

@hikka-ru 3 года назад

I used toggle sections.

@chergagne7430 4 года назад

Hey! I like your content!

@trevormartin5348 3 месяца назад

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

@trevormartin5348 3 месяца назад

I figured out a way using z-index setting

@majdfrass6669 7 месяцев назад

Where can I find the JSON file of this header, please?

@ridaibrir5333 4 года назад

Thanks Just a little bit issue Please, How can I add a langual switcher and a login button.

@muhammadbinzeeshan2504 4 года назад

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?

@nabeelahmad8453 2 года назад

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.

@thelaunchacademy 9 месяцев назад

I can't find the copy paste code for adding the code

@lminier1 Год назад

how do i change the HAMBURGER menu color ?

@f52023 Год назад

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?

@FMLyrics Год назад

did you find any answers about it, since i have the same problem now

@ozcodewebservices5464 3 года назад

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 );

@giannisiliopoulos 2 года назад

So is there a way to have the active link in these menus in general Bold or highlighted?

@storyteller-productions 3 года назад

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.

@SimonKling 3 года назад

you have to use the Wireframe View in your visual builder to see the 2nd row. The horizontal offset make it disappear.

@withyouTillforever 9 месяцев назад

how to slide in from the left?

@brandonselfors5993 4 года назад

The json file won't upload in the builder. Goes the header need to be 'global'?

@rawpicturestudios 4 года назад

Same problem. Its not working at all … one hour lost.

@lunar_zebro 4 года назад

How about using the menu in a landscape mode on mobile?

@spitsparrow 3 года назад

how to get hover over effects on the text menu? anyone can help?

@حقوقي-ذ9د 4 года назад

How to disable the horizontal slider on post and category pages please?

@elegantthemes 4 года назад

If you need further help, you can open a chat with our support team: www.elegantthemes.com/members-area/help

@ozcodewebservices5464 3 года назад

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.

@Angeal77 4 месяца назад

Does not work

@carrieli1678 3 года назад

can't find the slide menu,, disappear,,, why..? anyone can help?

@elegantthemes 3 года назад

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

@recomposemedia4603 3 года назад

How would I get it to work on the left side?

@SimonKling 3 года назад

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%).

@kumarsondandsh4634 4 года назад

شكرا

@e-comthebeast624 3 года назад

Hi Where can we find this code ?

@elegantthemes 3 года назад

Hi there 👋 The code can be found in the Blog Post for this tutorial 😀

@rosembergmassocati9048 4 года назад

OMG please! half an hour to make a menu! This ins't function AT ALL!!!!

@avecyber 4 года назад

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?

@dubweiser_dnb 2 года назад

Great tutorial... but the voice is very boring

@josuewu 2 года назад

Even if you don't see the menu bar, you can click the Menu. This tutorial is useless.

@coderplus362 2 года назад

bad exprience

@toomaj 3 года назад

waste of time

@muhammadbinzeeshan2504 4 года назад

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?