How to Add an Animated Menu Icon in Bricks Builder

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ม.ค. 2025

ความคิดเห็น • 43

  • @gerbendol2837
    @gerbendol2837 หลายเดือนก่อน +1

    Awesome video! I've seen people do cool things with these settings, but I love this solution as the default Bricks hamburger toggle is so boring. Keep up the great work, as someone new to Bricks but familiar with front-end development you're really connecting the dots for me!

  • @Mherhenry
    @Mherhenry 8 หลายเดือนก่อน +1

    Thank you so much, but what about animating accordion icon?

    • @OscarObians
      @OscarObians  8 หลายเดือนก่อน +1

      Totally doable with the same principle. I'll make a video about it

    • @Mherhenry
      @Mherhenry 8 หลายเดือนก่อน

      Thank you, greetings from Armenia 🇦🇲 ❤️🤘🏻

    • @OscarObians
      @OscarObians  8 หลายเดือนก่อน +1

      Here you go: th-cam.com/video/tCPCenbKblo/w-d-xo.html

    • @Mherhenry
      @Mherhenry 8 หลายเดือนก่อน

      @@OscarObians Thank You so much!!

  • @amine_arwin
    @amine_arwin 9 หลายเดือนก่อน +1

    thanks but how you add the custom SVG option in the in icon ?

    • @OscarObians
      @OscarObians  8 หลายเดือนก่อน +1

      Make sure to choose the toggle element. In the Content tab, Click the icon option > select library > SVG

  • @adaskosb
    @adaskosb 8 หลายเดือนก่อน +1

    Could you explain me how to add below full scale search form on mobile version?

  • @nostressirish2767
    @nostressirish2767 8 หลายเดือนก่อน +1

    just what i was looking for. Great explanation too. Thanks Oscar

    • @OscarObians
      @OscarObians  7 หลายเดือนก่อน

      Glad it was helpful!

  • @Kirolmh
    @Kirolmh 7 หลายเดือนก่อน +1

    How did you make the Nav menu(nestable) to scroll sliding from up to down and have that specific height? Because my Nav slider nestable is full width with a fadein animation (which I don't like).
    I know that there is an option to set the height and width of the Nav items on mobile, but you said that you didn't style anything specific and also I would like to know how to make the sliding from up to down.

    • @OscarObians
      @OscarObians  7 หลายเดือนก่อน +1

      I'll make a video on building that kind of nav menu. But you can try typing "fit-content" for the content height. And setting the menu animation to "Slide down" instead of fade in. I'm away from my laptop at the moment so sorry I can't be more accurate.

    • @Kirolmh
      @Kirolmh 7 หลายเดือนก่อน +1

      @@OscarObians actually I tried your url of the subdomain that you use in the tutorial, and after inspecting I recognised that for mobile you used a Offcanvas element. That way I was able to achieve the same result as yours.
      Thanks for your reply!

    • @sokolh2710
      @sokolh2710 7 หลายเดือนก่อน +1

      @@OscarObians Please show us how did you made that nav menu using offcanvas, also can you add dropdown in it?

    • @OscarObians
      @OscarObians  7 หลายเดือนก่อน +1

      @@sokolh2710 I'm currently working on a video on it

    • @OscarObians
      @OscarObians  5 หลายเดือนก่อน

      Here you go: th-cam.com/video/SZcPeCzWV2s/w-d-xo.html

  • @Nima-Norouzi
    @Nima-Norouzi 9 หลายเดือนก่อน +1

    Thanks and subscribed 🎉

    • @EliasRise
      @EliasRise 9 หลายเดือนก่อน

      Thanks! Much more value is given here from just building an animated menu (Codepen code conversion to Bricks Builder). Excellent tutorial! I subscribed

  • @M173M
    @M173M 28 วันที่ผ่านมา

    How do you turn on that search bar for apps and stuff. Is it some extension or

    • @OscarObians
      @OscarObians  27 วันที่ผ่านมา +1

      @@M173M oh that's Listary. I recommend getting the latest free beta version. It's such a time saver

  • @shibupandit24
    @shibupandit24 9 หลายเดือนก่อน +1

    Awesome tutorial 🎉

    • @OscarObians
      @OscarObians  9 หลายเดือนก่อน

      Thank you 😁

  • @szecse
    @szecse 7 หลายเดือนก่อน +1

    Amazing guide thank you!

    • @OscarObians
      @OscarObians  7 หลายเดือนก่อน

      I'm glad it helped. More to come

  • @re-member
    @re-member 7 หลายเดือนก่อน

    Fabolous! Thank you very much.

  • @nickjohn1770
    @nickjohn1770 4 หลายเดือนก่อน

    Great tutorial, thank you Oscar!

    • @nickjohn1770
      @nickjohn1770 4 หลายเดือนก่อน +1

      .ham8 has
      //stroke-dashoffset: -20px;
      The // is making this line invalid. If the line is enabled, it doesn't work properly. This was meant to be removed?

    • @OscarObians
      @OscarObians  4 หลายเดือนก่อน

      @@nickjohn1770 Yes indeed it should have been removed. Thanks for pointing that out. I've updated the code.

  • @PlayCraig
    @PlayCraig 9 หลายเดือนก่อน

    Really cool, thanks for sharing!

    • @OscarObians
      @OscarObians  9 หลายเดือนก่อน +1

      Thanks for watching!

  • @bob-p7x6j
    @bob-p7x6j 7 หลายเดือนก่อน +2

    do appreciate the time and knowledge it takes to put this together, but the music is distracting to me and hinders my concentration, just a little feedback, please don't be offended...

    • @OscarObians
      @OscarObians  7 หลายเดือนก่อน +1

      Thanks for the honest feedback. I've received the same from several viewers. There'll be no more music in subsequent videos. Saves me the extra trouble anyways.

  • @victorgurov1489
    @victorgurov1489 8 หลายเดือนก่อน

    Great tutorial, thank you!

    • @OscarObians
      @OscarObians  8 หลายเดือนก่อน

      Glad it was helpful!

  • @PeterTaylorRX
    @PeterTaylorRX 3 หลายเดือนก่อน

    EDIT : I'm a mor-on... you had a basic setup targetting off-canvas by default while I wanted to self-target my toggle button....
    I just copy and pasted "ham8" from your forked CodePen (did not forget global classes and made sure I copied SVG and not the button) and it just won't animate upon click, I feel there is a missing step, like how does the Toggle element add the .is-active class ?I don't see it being added on the inspector.

    • @OscarObians
      @OscarObians  2 หลายเดือนก่อน

      The is-active class is being added by Bricks. We have no control over that part

  • @YasirShabbir
    @YasirShabbir 2 หลายเดือนก่อน

    Amazing content thanks for sharing you just got a subscriber :)

    • @OscarObians
      @OscarObians  2 หลายเดือนก่อน

      Thank you for subscribing. Glad you found it useful

  • @stewtech
    @stewtech 9 หลายเดือนก่อน +1

    Thank you!!

  • @digwillhachi
    @digwillhachi 7 หลายเดือนก่อน +1

    great video but please lose the music.

    • @OscarObians
      @OscarObians  7 หลายเดือนก่อน

      Will do. No more music in subsequent videos 🫡