How to Create a Floating Pop out Menu in Divi

[@CurtisHumphreys-g4f]

Thanks! Just a note for people who are using the latest version (June 2024) of Divi. You'll need to change the CSS slightly to center the "Menu" text. Put the following CSS in the "Main Element" of the row settings: display: flex; align-items: center; justify-content: center;

[@learnedonaccident6693]

KZbin put this on my suggested page... these agorythems are too smart. I was trying to figure out divi dot navigation but this is way better. Thank you sir

[@TheBiggervern]

Thanks Mak for the clever use of Divi

[@LawnCrack]

Awesome! Thanks Mak!

[@pauldejong3100]

The content of this tutorial is great, this is an awesome trick! However, as other commenters have also pointed out, these tutorials lack in didactic value. This tutorial is all about using an accordeon with negative left margin to simulate a left-side popout menu. Then please highlight this before you start with 'do this, do that...'. Also, describing all the details like font, color, etc distract from the important part of the content. So my advice is: 1. Show the end result at the start (you did do this here, but way too short). 2. Give a short description of how you plan to achieve this. 3. Show a list with the steps you intend to do. 4. Show the steps. Keep the details to a minimum (or refer to other tutorials). This would make these tutorials even more useful!

[@Mayanktaker]

Or just see their blog post for this tutorial..

[@perivv]

I agree. On the one hand, there are goals and the related fundamental settings (like margins and custom css) and on the other hand, there are anecdotal ones (like choosing a premade layout, extending styles to all items, etc.). I fully understand that ElegantTheme takes the opportunity to advertise about its ("controversial") layout library 😜but melting both pedagogical matters and fantastic features showcase is not always welcome. Anyway.

[@ericjohnson4164]

Worked great for my needs, thanks!

[@robertsiprak6147]

Thanks for great tutorial.

[@elegantthemes]

That's great! I'm glad you liked it! 😊

[@michabednarski5555]

Is there a plugin that allows us to create secondary menu as slide in? I need to create shop categories on the left

[@abhijeetsdm2605]

YES MAK this is very Good hack , thanks man

[@ThebrandsurgeryCoUk1]

Finished this with almost 100% except ... the section which houses the menu is showing up as a big gap on desktop and mobile. Please can you share how you get rid of the vertical gap.

[@KeremURUMURsirrica]

Good tutorial, thanks...

[@SimpleMindOPENSPACE]

The tutorial is awesome... I just do not understand if it going to work well also on mobile devices... With Divi, if you give negative margins that moves stuff to the right or left, it just means that the browser activates a horizontal scrolling bar...

[@vch56]

It doesn't work on mobile, I have spend ages trying to make it work on all devices, but it just cannot do that

[@SimpleMindOPENSPACE]

@@vch56 yeah in the end i gave up on that😁 Using the theme Builder i created floating menues for mobile only

[@MarkusWalzeu]

How can I move this menu to the right side of the screen?

[@ThebrandsurgeryCoUk1]

Can you run the header text vertically?

[@DavidHoefgen]

THX!

[@amirhusain8264]

Hi, How can you the align text "MENU" to vertical? Please can you provide css.

[@elegantthemes]

Hey Amir! Here's the CSS that can help you achieve that: display: flex; flex-direction: column; justify-content: center;

[@amirhusain8264]

Thank you for your quick reply: I want the text to go vertical. As my text does not fit. Please can you provide the css.

[@Mayanktaker]

Superb

[@vijaykv4079]

Hey, the link that you have given in the description is showing 404 error. Where do I get the CSS code?

[@GeeElle]

www.elegantthemes.com/blog/divi-resources/how-to-create-a-floating-pop-out-menu-in-divi. Css code is about 2/3rds the way down

[@youngfreelancer3962]

The page link doesn't exist

[@Lida22]

Thanks for a great tutorial, but please PLEASE narrate your mouse clicks!! It is frustratingly confusing to us who watch these for you to gloss over something and we cannot see what you did. For example, at 4:10 you say "...and now I'm going to extend..." and you do SOMETHING and on screen SOMETHING happens but we cannot tell what it is you did. It is a mistake to assume that all your viewers are as fluent in Divi as you are. That's the reason we watch these tutorials - we need to learn! And you cannot teach us if you don't show and tell us what you do. So in the future, please do not do ANYTHING on screen without also verbally telling us what you do, and wherever possible, zoom in the screen so we can see it. Yeah, yeah, I know you're trying not to make the tutorial too long, but it's a false economy to "keep it short" when your viewers miss an important element because of this. NARRATE ALL MOUSE CLICKS/ACTIONS.

[@tanatos06]

When he said I'm going to extend he went to the "extend" button, nothing else. You need to have some understanding on Divi in order to max out your designs with the tutorial, otherwise you will feel lost. For me it was well explained :D

[@MCSBvideos]

@@tanatos06 Some people are field-independent learners, meaning they figure things out for themselves; and some are field-dependent learners, meaning they need someone to build the framework for them, then they learn. Doesn't make them less smart, it's just a different learning style. I'm glad that for you the tut was well-explained. However, in this particular instance, if anyone happens to move their mouse at just the wrong moment, YT will pop up a control panel at the bottom of the screen that totally covers the EXPAND button. If he is not narrating his button clicks, AND did not zoom in on the area of the screen in question - WHICH HE DID NOT DO - would result in the viewer being totally perplexed by the action he took. You cannot teach to your own level of learning in anything. You must consider ALL the people who may be wishing to learn. It's a mistake to assume the rest of the world is "like you." Unfortunately, most people do just that.

[@Parche_911]

nice, but still dont made for 2020 mobile trend.. so sad all this vids are made for unused desktop screen...

[@jesseboyer5698]

worked beautifully. i just made from scratch in the builder and applied the negative margin to the section and the float id to the section, thanks. championslandscpae.com (site under construction but coming soon is coming along)