Thanks for the explanations, I learned some new stuff from this. Since the dropdown content would always be 1-2 pixels up and to the left of where I instructed it to be and the toggle menu would only allow for sliding in, this pop-up method appears to offer more options for me and no quirks yet.
Great tut! Don't worry too much about jumping all over the place teaching - we all do that when we forget or suddenly decide to do something. That's natural and, actually, helps me understand and remember what to do and where to jump, if I suddenly have the best styling idea in the middle of things. I would suggest not to add ANY TRANSPARENT overlay for sliding in/out Menus/popups. The preceding dark transparent strip with harsh edge looks a bit out of place. Either no overlay or blur the edge somewhat. Do I make any sense? 🙂
Great tutorial, Any idea when they'll come out with the menu builder? Because I feel like I don't want to build a custom one and later on change it all over again
Yes I know, but was wondering if there was a workaround maybe. Perhaps I could do try it with custom css. By they way, do you know a trick to move the canvas to the side when opening the menu?
Nice tut. But 1 thing is unclear. So i have to choose if i want the popup menu or the normal menu? theres no way to use the normal nav menu on desktop and the popup only on breakpoints below?
In Bricks 1.7, when adding an interaction on the section, there is no trigger action for 'Show Popup' - the only options under Browser/Window are Scroll, Content Loaded and Mouse leave window. is there a way to deal with this? Thanks
Hey Imran - How did you get the menu to actually slide. I cant get it to work for the life of me! Is there a bug with have the menu slide in off screen. Instead of just appearing instanstly?
Hi, thanks for the video. I have set the popup template but instead of 2 icons I want one animated toggle to show / hide the popup. I have the toggle in the header template and clicking does toggle the .active state, but I can't make the actual popup to show / hide. Appreciate your input.
no, I used javascript (copied) to toggle the .active class on the mobile wrapper, which indeed it does but the popup is not activated by it. In your video you have 2 icons, one is the hamburger and the 2nd the close button. Mine is hamburger animating to close button so only 1 toggle. I could use the interaction to toggle the .active class but I'll end up with the same issue. I tried setting height = 0 on the popup and 100vh on the .active but that did not work. Also tried not using popup but add a section with mobile menu to the header template. That did actually work but then the mobile menu wrapper caused horizontal scrolling🤔. If using interaction: how do I open and close the popup with 1 toggle instead of 2 icons?
As in slide in. That would need some custom JS to ensure that the cart products all become displayed. Of course you could maybe just drop a cart widget into there and show it expanded within the Pop-Up, but you'll have to play with it.
Always better to add a copy of the Nav Menu in the Header as a hidden widget so that it gets detected. See this for the logic: th-cam.com/video/mLOz60kr_sA/w-d-xo.html
Seems that with the latest version of Bricks you cant select popup as a template/section the way you did it in the offcanvas page. How will that work out now?
Hi, I have built an OffCanvas PopUp Menu, which has to be scrollable in the smartphone. Unfortunately I can't scroll in the popup, do you have an idea how I can solve this?
@@websquadron Thank you for your quick response. The problem was that I was standing in my own way :-). After hours of trial and error, I gave the last section a margin bottom of 300px, then the scrollbars came up automatically. The content was previously just high enough to be out of view of the mobile chrome browser - but no higher than 100% of the phone's display. Thus the content has moved under the navigation bar in the footer of the chrome browser, but it was not enough to display the scrollbars. hmmmpf... ! I'm annoyed that I didn't think of it sooner :-).
@@websquadron Oh, it actually works if I do it on the menu open icon itself, instead of the click => show popup interaction, directly click => start animation.
Purchased Bricks. Well worth supporting this effort that's still in early stages. Still using elementor tho.
非常棒的讲解内容 ,简洁明了,通过你的视频我学到了很多Bricks的知识,谢谢你!!😄
Great job, you built an off-canvas in 15 min. I love the comment: "This is the only time when the Finger is Good!"
Ha :) Yes :) :)
Hello, thank you for the incredible tutorial.
Great video. I like your commitment, the time you spend and the way you pass on your knowledge. I appreciate !
I appreciate that!
Off canvas very strong width bricksbuilder. Awesome tutorials bro
Thanks for the explanations, I learned some new stuff from this. Since the dropdown content would always be 1-2 pixels up and to the left of where I instructed it to be and the toggle menu would only allow for sliding in, this pop-up method appears to offer more options for me and no quirks yet.
Thanks Imran for your effort!
And now make it slide out too ;)
Thank you. it is great for single level pages, but it can't be use as more then one level pages.
Thanks for the great video
Glad you enjoyed it
Great tut!
Don't worry too much about jumping all over the place teaching - we all do that when we forget or suddenly decide to do something. That's natural and, actually, helps me understand and remember what to do and where to jump, if I suddenly have the best styling idea in the middle of things.
I would suggest not to add ANY TRANSPARENT overlay for sliding in/out Menus/popups. The preceding dark transparent strip with harsh edge looks a bit out of place. Either no overlay or blur the edge somewhat. Do I make any sense? 🙂
Good point about the transparent strip.
i beleive you this is the only time the figer is good.
Great tutorial, Any idea when they'll come out with the menu builder? Because I feel like I don't want to build a custom one and later on change it all over again
Not sure when but I have a feeling that it might won’t be long
Is it better to do px or rem? I notice you using px but dont know if just for demonstration simplicity
That was just for presentation as many are used to PX. In real builds I use REM and Clamp()
Hi, great video. Helped me a lot with the interaction. However my entrance animation doesn't work. Any thoughts how to resolve this?
Entrance animations have been a problem and I’m hoping it gets addressed in the next update
Yes I know, but was wondering if there was a workaround maybe. Perhaps I could do try it with custom css. By they way, do you know a trick to move the canvas to the side when opening the menu?
Nice tut. But 1 thing is unclear.
So i have to choose if i want the popup menu or the normal menu?
theres no way to use the normal nav menu on desktop and the popup only on breakpoints below?
You can select to have just the pop-up toggle for the Mobile.
@@websquadron Ill try to figure out how!
Youre the best!
In Bricks 1.7, when adding an interaction on the section, there is no trigger action for 'Show Popup' - the only options under Browser/Window are Scroll, Content Loaded and Mouse leave window. is there a way to deal with this? Thanks
I'll need to check
Hey Imran - How did you get the menu to actually slide. I cant get it to work for the life of me! Is there a bug with have the menu slide in off screen. Instead of just appearing instanstly?
You should have the option when you click on Mobile Menu to change it from Fade to slide. I am doing a new video on this for next week.
Hi, thanks for the video. I have set the popup template but instead of 2 icons I want one animated toggle to show / hide the popup. I have the toggle in the header template and clicking does toggle the .active state, but I can't make the actual popup to show / hide. Appreciate your input.
Are you using the interaction button for the show and hide element trigger?
no, I used javascript (copied) to toggle the .active class on the mobile wrapper, which indeed it does but the popup is not activated by it. In your video you have 2 icons, one is the hamburger and the 2nd the close button. Mine is hamburger animating to close button so only 1 toggle. I could use the interaction to toggle the .active class but I'll end up with the same issue. I tried setting height = 0 on the popup and 100vh on the .active but that did not work. Also tried not using popup but add a section with mobile menu to the header template. That did actually work but then the mobile menu wrapper caused horizontal scrolling🤔. If using interaction: how do I open and close the popup with 1 toggle instead of 2 icons?
How to make a mini cart in this way?
As in slide in. That would need some custom JS to ensure that the cart products all become displayed. Of course you could maybe just drop a cart widget into there and show it expanded within the Pop-Up, but you'll have to play with it.
what about SEO with this type of menu? i mean can robots search the menu links to get better SEO?
Always better to add a copy of the Nav Menu in the Header as a hidden widget so that it gets detected. See this for the logic: th-cam.com/video/mLOz60kr_sA/w-d-xo.html
@@websquadron thanks i suscribe. this in bricks then i need add nav menu to the header and select display none?
Seems that with the latest version of Bricks you cant select popup as a template/section the way you did it in the offcanvas page. How will that work out now?
Still works for me. Are you selling the show content action?
Is there support in bricks to make the menu push instead of slide?
Not yet
When "menu" slide in, transparent background slide in too. Any idea how to fix it?
Yup I'm looking more into that too, as I would prefer it to just appear rather than slide. I am playing around with a little fix on that.
@WebInke Design We're still experimenting with possible solutions, such as remove the transitional slide and add a transition fade.
Hi, I have built an OffCanvas PopUp Menu, which has to be scrollable in the smartphone. Unfortunately I can't scroll in the popup, do you have an idea how I can solve this?
That will be a problem unless you add another container inside with some JS/script to enable a scrollbar for the inner container.
@@websquadron Thank you for your quick response.
The problem was that I was standing in my own way :-).
After hours of trial and error, I gave the last section a margin bottom of 300px, then the scrollbars came up automatically.
The content was previously just high enough to be out of view of the mobile chrome browser - but no higher than 100% of the phone's display. Thus the content has moved under the navigation bar in the footer of the chrome browser, but it was not enough to display the scrollbars. hmmmpf... !
I'm annoyed that I didn't think of it sooner :-).
@@danielpulsn Well done on solving it! :)
My menu won't slide in - it just appears, even though I have set up the "start animation" on the "show popup" trigger. Do you have any idea why?
Are you viewing it on live and not just the bricks preview?
PS any optimising plugins that affect JS activated?
@@websquadron Oh, it actually works if I do it on the menu open icon itself, instead of the click => show popup interaction, directly click => start animation.
the slide effect won't work on me I follow all the step but the slide won't work
Sorry about that. Is the animation in the interaction set?
@@websquadron yeah I just follow all the step you did
I can't seem to add an interaction on Hide Popup to get an exit animation. Any ideas on this?
I'm looking into that too.
13:31
Ha :) Yes. Trust the Finger.
Your videos are so damn long please keep them short. Videos are nice but there is no free time for everyone to watch long videos.
Seriously?
I don't think they are, so please feel free to unsubscribe and don't watch my videos.
I will keep doing what I do.
Take care.