HOW TO [01] Create a Mobile Menu using the Bricksforge Panel!

In this video I'll show you how to use the Bricksforge Panel to create a Mobile Menu.
Get Bricksforge: bricksforge.io/
Roadmap: bricksforge.io/roadmap/
Documentation: bricksforge.io/documentation/
Forum: forum.bricksforge.io/

[@maxziebell4013]

And this is only the tip of the iceberg, people… really impressive! It's a whole new playground!

[@vanmarciano]

This looks really good! Bravo.

[@heikodietze4983]

Again a very nice explanation, Daniele. And incredibly powerful tool. 👌🏻

[@the_meaning_of_love]

Impressive, it is incredible how smooth and well-thought-out the Bricksforge panel is. Thank you for creating this tool 🙏🏼‍💚

[@dh_investing]

Just got a Bricksforge license and I am already hyped for the opportunity!

[@tobias3464]

Really cool! Love it!

[@bySterling]

So awesome!

[@pixelgap]

Amazing!

[@Pxwahid]

Cool!

[@ThierryC-te3rx]

This thing is crazy !

[@adamu6941]

I just bought your product, very good rhings, can you explain the mega menu element functionality ?

[@sebdemb]

Is this a good practice as SEO perspective? Is the mobile menu part of the DOM of the page?

[@PLUZCITY]

It is great for single level pages but how about if have more levels? How to make the sub menu?

[@Vinicius-bk1nr]

Hey, how to reverse animation on second click? in the same element trigger?

[@DjLITO]

please more more more

[@DraganMiletic]

I guess it's possible to animate the trigger? From hamburger to X. Looks like I'm really close to quitting Elementor and transfer to Bricks, thanks to Bricksforge. Continue with improvements and new more complex animations!

[@bricksforge]

Hi! :) Of course you can animate the trigger too :-)

[@DraganMiletic]

@@bricksforge As you say - The possibilities are endless! :-) Thanks for replay!

[@Pxwahid]

I don’t know if it’s hard to code. But would love to see a custom stylesheet within forge. In Bricks it’s still in the idea board.

[@maxziebell4013]

Isn't global classes a custom style sheet? You can add all you want in there, or do you mean having a CSS editor in the panel itself?

[@Pxwahid]

Global classes is a custom stylesheet. That’s right. But as for my knowledge there is no place to open this stylesheet and add something in it.
What I mean is in the editor and it would be cool to also find this stylesheet in the dashboard in Bricksforge.

[@bricksforge]

So you talk about a CSS code editor in the Bricksforge Admin UI which is always in sync with a custom created CSS file on the server?

[@Pxwahid]

@@bricksforge yes. And it would be perfect if you can make separate css files. For specific pages.
Ex.
main.css
landing-page.css (this one is only used on specific pages.)

[@BGdev305]

@Bricksforge Do you have gsap's FLIP implemented yet?

[@danielederosaweb]

It’s already implemented 👍

[@crazyqueen1992]

Hey there,
i followed this tutorial 1 by 1, but unfortunately it appears the "invisible" layer of the navigation menu prevents the website to respond to the trigger events / at all. How can I fix that?
PS: I have a sticky header menu, ist das possibly the reason?

[@bricksforge]

Hi! 🙋🏻‍♂️ what’s the current state of your menu? Just opacity: 0? Or do you play with translate?

[@tobias3464]

I rebuilt this demo and it works super! But now I realized that when the page content is higher than the viewport height of the mobile menu I can scroll the menu section, so the menu gets scrolled away and the content below will appear. I want to prevent it. When the menu is opened I just the menu section to be visible. How can I do that?

[@bricksforge]

Hi! 🙋🏻‍♂️ Just use position:fixed instead of absolute. Then you’re there 😎

[@tobias3464]

@@bricksforge Nice, thank you! It's working although the scroll bars are still visible. Can I hide those while the menu is displayed?

[@bricksforge]

​@@tobias3464 To prevent browser scrolling while the menu is open, just create a class with overflow: hidden. Then, you could create an additional action addClass when open the menu to assign it to the body. While the body has this class with overflow: hidden, no scrollbar will appears. When running the close action, just remove this class again with the "removeClass" action. Done :)

[@tobias3464]

@@bricksforge Wow, thank you for taking the time to answer to my question! I learned a lot! Thanks man!

[@DesignRobPearce]

Does this work on the latest Bricksforge? I tried to follow it but it doesn't seem to launch the Timeline animation like this does :/ THNX

[@bricksforge]

Hi! :) Are there errors in the console?

[@DesignRobPearce]

@@bricksforge Hey! Yes actually, perhaps something I am doing wrong but it seems pretty simple from your above video. Uncaught (in promise) SyntaxError invalid or unexpected token. Also using the absolute position means the pages scrolls under the menu when it's open, right?

[@DesignRobPearce]

@@bricksforge Worked it out, I think. I was using the same element to trigger the event both play and reverse, but it only worked on play and not reverse? Setting another element for reverse worked. Why can you not use the same element (i.e menu button that animates to a X) to trigger both please?

[@bricksforge]

@@DesignRobPearce Hey again! :) Makes sense. That's JavaScript. You would need Event Bubbling to handle such situations. Or, much easier: Use the "Event Action Conditions" (the condition icon on the right of your event action). Give your trigger a class on open and fire the close action only if your trigger contains this class - with a small delay of 50 or so. Then you will be able to trigger open and close with the same icon :)

[@DesignRobPearce]

@@bricksforge thanks I’ll give that a go! I did try this actually but didn’t seem to work, but I didn’t use a delay!

[@kimbaxter6917]

😂 p̳r̳o̳m̳o̳s̳m̳