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

Поділитися
Вставка

КОМЕНТАРІ • 53

  • @markbratton111
    @markbratton111 Рік тому +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 роки тому +3

    Definitely add this to Bricks Library.

  • @skjelstad777
    @skjelstad777 2 роки тому +2

    So like your style and Bricks content!!

  • @MRJMXHD
    @MRJMXHD 2 роки тому +1

    Bloody good video mate.

  • @jfiosi
    @jfiosi 2 роки тому +2

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

  • @KshitijShah89
    @KshitijShah89 2 роки тому +4

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

  • @Sashad2003
    @Sashad2003 Рік тому

    Very good idea. Thank you 🤝

  • @KariposTheOne
    @KariposTheOne 2 роки тому +1

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

  • @weili6126
    @weili6126 2 роки тому +1

    really great thanks so so so so so much

  • @pixelgap
    @pixelgap 2 роки тому +1

    thanks Imran

  • @PicSta
    @PicSta 2 роки тому +2

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

  • @antonichristian5845
    @antonichristian5845 2 роки тому +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 роки тому +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 10 місяців тому

    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  10 місяців тому

      Not tried it but possibly with z indexing

  • @AmandaLucaseu
    @AmandaLucaseu 2 роки тому +1

    Great idea 👍🏻

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

  • @rework7562
    @rework7562 2 роки тому +1

    Smart!

  • @marcosansalone
    @marcosansalone 5 місяців тому

    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 5 місяців тому

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

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

  • @marcosansalone
    @marcosansalone 3 місяці тому

    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?

  • @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 2 роки тому +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  2 роки тому +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.

  • @educationforever314
    @educationforever314 Рік тому

    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.

  • @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 2 роки тому

    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  2 роки тому +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 2 роки тому +1

      @@websquadron really looking forward to them. :)

    • @websquadron
      @websquadron  2 роки тому

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

    • @websquadron
      @websquadron  2 роки тому

      The first Class one comes out tomorrow :)