Bricks 101 Part 11 - Custom Mobile Menu Dropdown Trick with Nestable Accordions

No video

Bricks 101 Part 11 - Custom Mobile Menu Dropdown Trick with Nestable Accordions - BricksBuilder

Рет қаралды 7,739

Күн бұрын

Bricks Builder are bringing out a new Mobile Menu Builder but until they do - then this trick using another widget may add some wonderful layouts for your Mobile dropdowns.
Bricks 101 Part 11 - Custom Mobile Menu Dropdown Trick with Nestable Accordions - BricksBuilder
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
👕 Get our Merchandise: 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....
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩‍💻 Visit websquadron.co.uk

Пікірлер: 62

@markbratton111 10 ай бұрын

Dig! This solved an issue I had after rebuilding a website in Bricks that was once was an Elementor build (the client no longer wanted to pay for EPro). Voila! This was a great tut. Imran, you've done it again!

@making8analytics2 Жыл бұрын

Definitely add this to Bricks Library.

@jfiosi Жыл бұрын

Excellent work. Thanks for sharing the little gotchas and workarounds. Only someone who knows, can offer these insights.

@websquadron Жыл бұрын

Much appreciated!

@KshitijShah89 Жыл бұрын

Dude this series of videos is 🔥 but this video in particular is 🔥🔥🔥🔥

@PicSta Жыл бұрын

Excellent workaround! Even I really hope to have the mobile builder soon inside of Bricks released. Good job Imran & keep creating.

@websquadron Жыл бұрын

Thanks 🙂

@skjelstad777 Жыл бұрын

So like your style and Bricks content!!

@websquadron Жыл бұрын

More coming next week :)

@KariposTheOne Жыл бұрын

Nice workaround! Can't wait for mega menu and mobile menu builder, so we won't have any limitations.

@websquadron Жыл бұрын

Same here!

@antonichristian5845 Жыл бұрын

thanks Imran for taking the time to make this... working it out must have been... painful lol but it works and that's the main thing... on a personal level i think it's very disappointing you have to do something like this mobile menu is such a vital thing you would think it would have been thoroughly tested before release... maybe i'm being too harsh but that's just my feeling... oh well the mobile builder is on its way so it will make up for it hopefully...

@websquadron Жыл бұрын

I sure hope that the Mobile Menu Builder answers a lot of this :) And yes, it was PAINFUL !

@MRJMXHD Жыл бұрын

Bloody good video mate.

@Sashad2003 Жыл бұрын

Very good idea. Thank you 🤝

@weili6126 Жыл бұрын

really great thanks so so so so so much

@pixelgap Жыл бұрын

thanks Imran

@AmandaLucaseu Жыл бұрын

Great idea 👍🏻

@ericlee3116 7 ай бұрын

Great video! If I'd watched this tutorial earlier, I wouldn't have wasted the past two days. Is there a way to make the accordion's expanded content cover the entire screen, hiding/cover the footer even during scrolling?

@websquadron 7 ай бұрын

Not tried it but possibly with z indexing

@marcosansalone 26 күн бұрын

Hello, I just realised that in your tutorial the hamburger menu icon is not switching to the X icon. Is there a way to do that?

@educationforever314 10 ай бұрын

instead of applying "position:absolute" we can use negative "margin-top" to our "Mobile Menu Dropdown" container and align it with "site title" with the required negative margin, and then give z-index to site title and accordion accordingly. This soution is eaiser for me.

@websquadron 10 ай бұрын

Nice one :)

@marcosansalone 2 ай бұрын

Super cool! I have one problem. The accordion is not expanding the tab to the bottom direction but actually keeping the widget in the middle and pushing the logo out of the page. I can't change this behaviour.

@marcosansalone 2 ай бұрын

Ok, looks like it was the container missing and absolute position.

@rework7562 Жыл бұрын

Smart!

@mahbubjubayer9453 Жыл бұрын

Playing bricks with your specials videos . Converted a landing page from figma . Little hard to understand some of elements , but your detailed description in video tutorials r in top . Happy web designing are coming to easy ends by your videos . little confusion? Can I use rank math with bricks. They have SEO elements . Waiting for your solution

@websquadron Жыл бұрын

You can - but not in the integrated way like Elementor. So you can still set up and do the settings etc, but actual on page Rank Math won't work the same way (yet). I may do a video on that one day.

@rag7628 Жыл бұрын

Thank you so much for this great tutorial.. What is this for a browser or App you are using to preview the mobile view ?

@websquadron Жыл бұрын

It’s just a webpage. Responsinator.com

@vegardbell Жыл бұрын

I'm really interested to dive into Bricks (have Ltd) but have invested so much in the Elementor ecosystem that I'm not sure. Do you use Bricks or E most in your projects?

@websquadron Жыл бұрын

I still use EL, but am experimenting with Bricks so I'm not reliant on just one Page Builder. Bricks will be the Pandora's Box for more complex builds.

@worldnature2100 Жыл бұрын

Excellent video tutorial! Could you do a demo with a multilingual website? How would you do it? (eg 3 languages). Thanks

@websquadron Жыл бұрын

I’d use the GTranslate plugin. And then the user can select from a drop down or maps to select their language.

@deehrk Жыл бұрын

Hey imran , nice works! , was meddling with this then found out its not good 3 level menus ? any workaround for this buddy ?

@websquadron Жыл бұрын

It’s a bit of a hack and would be much better once the actual mobile menu comes out

@DanielCerny-oc9hp Жыл бұрын

Great tutorial. Any idea how to make the bar burger change to cross when the accordion is open? Possibly with some animation?

@websquadron Жыл бұрын

Yup, and I need to do a tutorial on that very soon.

@viimoura Жыл бұрын

I dont understand at the final solution to the selectable after click on menu multiple times, whats the solution here? 15:37

@websquadron Жыл бұрын

Do you mean that it’s not working for you?

@viimoura Жыл бұрын

@@websquadron can you type the solution here? because english is dont my native language and this video part are a little confusing

@Mia_Bella420 2 ай бұрын

Any chance to get the "white line glitch" disabled when opening/closing the menu?

@Mia_Bella420 2 ай бұрын

Thats a no?

@websquadron 2 ай бұрын

Hi - not yet. I’ve got a back log of other work and am prioritising paid commission work

@Mia_Bella420 2 ай бұрын

@@websquadron Understandable. But why uploading half working "solutions" to youtube in the first place? Much love❤❤❤

@websquadron 2 ай бұрын

@@Mia_Bella420 At the time of recording this was a workaround before Bricks introduced their own Mobile Menu - as there was no such setting - thus my later video on that gives the less hack route. The half-working solution was to help people that were calling for a way to do it. :)

@BrendanMKav Жыл бұрын

I tried to build this into a header template to make custom dropdowns for my header menu, but the nestable accordion doesn't show up on any other pages except the template itself. I'm thinking it's a bug in that the accordian doest carry over in the templates. Anybody have any ideas?

@websquadron Жыл бұрын

Have you seen my new mega menu hack video that may offer a different option?

@BrendanMKav Жыл бұрын

@@websquadron haven’t seen it yet, but I got it to work by no saving the template as a header type and disabling header templates across the site.. really weird situation, means I’ll have to update the header in each page manually if I wanna go that route.. but I’ll take another look in the coming weeks ti figure it out.. its a personal project anyway so it’s no priority weighting on it

@vasiliykozieniev2559 Жыл бұрын

When you navigate through the pages, the menu is always open...how do I fix it?

@websquadron Жыл бұрын

Have you got a close button?

@vasiliykozieniev2559 Жыл бұрын

@@websquadron Yes, there is only one button, and when any page is loaded, the accordion immediately expands the menu.

@vasiliykozieniev2559 Жыл бұрын

Honestly, this is not quite relevant anymore because there is already a menu builder, but I'm just curious if anyone has done it, because it's an interesting idea to make a menu through an accordion.)

@Mia_Bella420 2 ай бұрын

Having 2 Nav menus is bad practice.

@Mia_Bella420 2 ай бұрын

But i guess theres no way around if you cant code and need to use a page builder.

@MrJacobpoliquin 2 ай бұрын

Then dont come on a video about a page builder function, if its only to say that you are a snob.

@Mia_Bella420 2 ай бұрын

What i ask myself is - Why are there no real styling options for mobile Menus in a page builder in 2023/2024? Why do we have to find work arounds? I dont know much about webdesign, but what i do know is the first rule: MOBILE FIRST! Nobody cares about nice desktop design anymore, yeah its nice to look at (for people who own a desktop and use it), but with visitor rates up to 90% coming from mobile devices these days (60.67% all of website traffic comes from Mobile Devices) nobody gives a fu** how nice your website looks on desktop.

@wanja8461 Жыл бұрын

You should really get used to custom classes workflow in bricks. It is a bit painful to see you don’t know or don’t care to teach /show this in all your otherwise great 101s.

@websquadron Жыл бұрын

They are coming in the later videos. I’m just covering the basics so anyone coming into Bricks doesn’t get lost with the settings etc. the class videos are coming later this week as we move into the Hero Banner etc. Don’t worry :)

@TakuapaFriends Жыл бұрын

@@websquadron really looking forward to them. :)

@websquadron Жыл бұрын

@@TakuapaFriends The first Class one comes out tomorrow :)

@websquadron Жыл бұрын

The first Class one comes out tomorrow :)