Bricks 101 - Part 31 - Off-Canvas Pop-Up Menu using Bricks Builder 1.6 BETA & Interactions -

No video

Bricks 101 - Part 31 - Off-Canvas Pop-Up Menu using Bricks Builder 1.6 BETA & Interactions -

Рет қаралды 6,770

Күн бұрын

Let's take the Bricks Builder 1.6 Beta's NEW Pop-Up and Interaction Feature and add an Off-Canvas Pop-Up Menu for the Desktop and Mobile - that opens up amazing possibilities.
Loving it!
Bricks 101 - Part 31 - Off-Canvas Pop-Up Menu using Bricks Builder 1.6 BETA & Interactions - #bricks
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your KZfaq Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩‍💻 Visit websquadron.co.uk

Пікірлер: 62

@brunobros3341 5 ай бұрын

Hello, thank you for the incredible tutorial.

@hassanfarhood8489 Жыл бұрын

Great job, you built an off-canvas in 15 min. I love the comment: "This is the only time when the Finger is Good!"

@websquadron Жыл бұрын

Ha :) Yes :) :)

@toano8855 Жыл бұрын

Off canvas very strong width bricksbuilder. Awesome tutorials bro

@MelTaylor Жыл бұрын

Purchased Bricks. Well worth supporting this effort that's still in early stages. Still using elementor tho.

@Mia_Bella420 2 ай бұрын

And now make it slide out too ;)

@pavelstanczuk Жыл бұрын

Great video. I like your commitment, the time you spend and the way you pass on your knowledge. I appreciate !

@websquadron Жыл бұрын

I appreciate that!

@user-hl6bq5wk6n Жыл бұрын

非常棒的讲解内容 ,简洁明了,通过你的视频我学到了很多Bricks的知识,谢谢你!!😄

@jugibur2117 Жыл бұрын

Thanks Imran for your effort!

@thorsten-roever Жыл бұрын

Thanks for the great video

@websquadron Жыл бұрын

Glad you enjoyed it

@Mercymurv Жыл бұрын

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.

@PLUZCITY Жыл бұрын

Thank you. it is great for single level pages, but it can't be use as more then one level pages.

@deehrk Жыл бұрын

i beleive you this is the only time the figer is good.

@WassPogoreloff Жыл бұрын

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

@websquadron Жыл бұрын

Good point about the transparent strip.

@deafdogdesign Жыл бұрын

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.

@websquadron Жыл бұрын

Are you using the interaction button for the show and hide element trigger?

@deafdogdesign Жыл бұрын

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?

@collectiveunconscious3d Жыл бұрын

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 Жыл бұрын

Not sure when but I have a feeling that it might won’t be long

@SteveNielsen2013 Жыл бұрын

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

@websquadron Жыл бұрын

I'll need to check

@Mercymurv Жыл бұрын

Is it better to do px or rem? I notice you using px but dont know if just for demonstration simplicity

@websquadron Жыл бұрын

That was just for presentation as many are used to PX. In real builds I use REM and Clamp()

@Mia_Bella420 2 ай бұрын

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?

@websquadron 2 ай бұрын

You can select to have just the pop-up toggle for the Mobile.

@Mia_Bella420 2 ай бұрын

@@websquadron Ill try to figure out how! Youre the best!

@WebsiteStudios-pw3dx Жыл бұрын

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?

@websquadron Жыл бұрын

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.

@MustafaSheikh 2 ай бұрын

13:31

@websquadron 2 ай бұрын

Ha :) Yes. Trust the Finger.

@pierrehecketsweiler2470 Жыл бұрын

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?

@websquadron Жыл бұрын

Are you viewing it on live and not just the bricks preview? PS any optimising plugins that affect JS activated?

@pierrehecketsweiler2470 Жыл бұрын

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

@user-hl6bq5wk6n Жыл бұрын

How to make a mini cart in this way?

@websquadron Жыл бұрын

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.

@a3z254 Жыл бұрын

the slide effect won't work on me I follow all the step but the slide won't work

@websquadron Жыл бұрын

Sorry about that. Is the animation in the interaction set?

@a3z254 Жыл бұрын

@@websquadron yeah I just follow all the step you did

@vascoegthuijsen8399 Жыл бұрын

Hi, great video. Helped me a lot with the interaction. However my entrance animation doesn't work. Any thoughts how to resolve this?

@websquadron Жыл бұрын

Entrance animations have been a problem and I’m hoping it gets addressed in the next update

@vascoegthuijsen8399 Жыл бұрын

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?

@zaitx Жыл бұрын

When "menu" slide in, transparent background slide in too. Any idea how to fix it?

@websquadron Жыл бұрын

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.

@websquadron Жыл бұрын

@WebInke Design We're still experimenting with possible solutions, such as remove the transitional slide and add a transition fade.

@eljedi5833 Жыл бұрын

what about SEO with this type of menu? i mean can robots search the menu links to get better SEO?

@websquadron Жыл бұрын

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: kzfaq.info/get/bejne/o7J_rZlh0NjDo3U.html

@eljedi5833 Жыл бұрын

@@websquadron thanks i suscribe. this in bricks then i need add nav menu to the header and select display none?

@danielpulsn Жыл бұрын

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 Жыл бұрын

That will be a problem unless you add another container inside with some JS/script to enable a scrollbar for the inner container.

@danielpulsn Жыл бұрын

@@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 Жыл бұрын

@@danielpulsn Well done on solving it! :)

@sorinciprian7579 Жыл бұрын

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?

@websquadron Жыл бұрын

Still works for me. Are you selling the show content action?