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.
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?
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?
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?
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
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
@@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.
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 :-).
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: ruclips.net/video/mLOz60kr_sA/видео.html
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? 🙂
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.
Purchased Bricks. Well worth supporting this effort that's still in early stages. Still using elementor tho.
Off canvas very strong width bricksbuilder. Awesome tutorials bro
Hello, thank you for the incredible tutorial.
Thanks Imran for your effort!
非常棒的讲解内容 ,简洁明了,通过你的视频我学到了很多Bricks的知识,谢谢你!!😄
Thank you. it is great for single level pages, but it can't be use as more then one level pages.
Great video. I like your commitment, the time you spend and the way you pass on your knowledge. I appreciate !
I appreciate that!
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 :) :)
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.
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()
Thanks for the great video
Glad you enjoyed it
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?
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?
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?
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
Is there support in bricks to make the menu push instead of slide?
Not yet
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
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.
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! :)
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.
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: ruclips.net/video/mLOz60kr_sA/видео.html
@@websquadron thanks i suscribe. this in bricks then i need add nav menu to the header and select display none?
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 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.
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
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.
i beleive you this is the only time the figer is good.
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.