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

Поделиться
HTML-код
  • Опубликовано: 10 окт 2022
  • 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.uk/web-design-...
    👕 Get our Merchandise: websquadron.co.uk/merchandise
    😃 Join our Facebook Group: / 3309523509284305
    😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
    😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
    😃 Boost your RUclips Analysis: www.tubebuddy.com/websquadron
    🥹 Support us: paypal.me/Websquadron
    Hire us to work on your Website!
    💌 info@websquadron.co.uk
    👩‍💻 Visit websquadron.co.uk
  • ХоббиХобби

Комментарии • 52

  • @markbratton111
    @markbratton111 8 месяцев назад +1

    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
    @making8analytics2 Год назад +2

    Definitely add this to Bricks Library.

  • @KshitijShah89
    @KshitijShah89 Год назад +4

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

  • @Sashad2003
    @Sashad2003 Год назад

    Very good idea. Thank you 🤝

  • @MRJMXHD
    @MRJMXHD Год назад +1

    Bloody good video mate.

  • @weili6126
    @weili6126 Год назад +1

    really great thanks so so so so so much

  • @skjelstad777
    @skjelstad777 Год назад +2

    So like your style and Bricks content!!

  • @jfiosi
    @jfiosi Год назад +2

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

  • @AmandaLucaseu
    @AmandaLucaseu Год назад +1

    Great idea 👍🏻

  • @PicSta
    @PicSta Год назад +2

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

  • @pixelgap
    @pixelgap Год назад +1

    thanks Imran

  • @rework7562
    @rework7562 Год назад +1

    Smart!

  • @KariposTheOne
    @KariposTheOne Год назад +1

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

  • @antonichristian5845
    @antonichristian5845 Год назад +1

    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
      @websquadron  Год назад +2

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

  • @mahbubjubayer9453
    @mahbubjubayer9453 Год назад +1

    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
      @websquadron  Год назад +2

      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.

  • @ericlee3116
    @ericlee3116 5 месяцев назад

    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
      @websquadron  5 месяцев назад

      Not tried it but possibly with z indexing

  • @marcosansalone
    @marcosansalone 11 дней назад

    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
      @marcosansalone 11 дней назад

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

  • @rag7628
    @rag7628 Год назад +1

    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
      @websquadron  Год назад +2

      It’s just a webpage.
      Responsinator.com

  • @educationforever314
    @educationforever314 7 месяцев назад

    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.

  • @deehrk
    @deehrk Год назад

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

    • @websquadron
      @websquadron  Год назад

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

  • @worldnature2100
    @worldnature2100 Год назад

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

    • @websquadron
      @websquadron  Год назад

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

  • @vegardbell
    @vegardbell Год назад +1

    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
      @websquadron  Год назад +1

      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.

  • @DanielCerny-oc9hp
    @DanielCerny-oc9hp Год назад +1

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

    • @websquadron
      @websquadron  Год назад +2

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

  • @BrendanMKav
    @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
      @websquadron  Год назад

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

    • @BrendanMKav
      @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

  • @viimoura
    @viimoura Год назад

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

    • @websquadron
      @websquadron  Год назад

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

    • @viimoura
      @viimoura Год назад

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

  • @vasiliykozieniev2559
    @vasiliykozieniev2559 Год назад

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

    • @websquadron
      @websquadron  Год назад

      Have you got a close button?

    • @vasiliykozieniev2559
      @vasiliykozieniev2559 Год назад

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

    • @vasiliykozieniev2559
      @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.)

  • @wanja8461
    @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
      @websquadron  Год назад +3

      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
      @TakuapaFriends Год назад +1

      @@websquadron really looking forward to them. :)

    • @websquadron
      @websquadron  Год назад

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

    • @websquadron
      @websquadron  Год назад

      The first Class one comes out tomorrow :)