Off Canvas Menu with Bubble Effect

In this tutorial I’m showing how you will add bubble effect in your off canvas menu. Note that this tutorial will only work with Beaver Builder theme. For other themes you need some adjustment.

Creating Beaver Template

Install the Beaver Builder plugin and enable the Builder menu at your dashboard. Now follow the setps

  1. Navigate to Builder -> Teamplates -> Add New
  2. Drag&Drop 1 column row
  3. Click on Row Settings link(wrench icon)->Advance Tab
  4. Add “bubble-effect” in CSS field.
  5. Add any module(s) inside the row
  6. Publish the template when design is complete
Rest of the contents are only available to members. You must subscribe the MEMBERSHIP plan. You already subscribe the plan? Login at below.

Login

11 Comments

  1. jeffrey on February 3, 2018 at 3:31 pm

    Hey I love using this setup! Would you happen to have any code snippets to make this exact module just a simple slideout without the bubble?

    • WP Beaver World on February 4, 2018 at 11:41 am

      You will remove the SVG markup from HTML and unload the svg-snap JS file.

      • jeffrey on February 4, 2018 at 2:50 pm

        I gave that a try and it seems like it just stops working all together.

  2. jerzy raczy on November 20, 2017 at 11:02 pm

    Hi!
    Can you make a video for this tutorial?

    Thanks

    • WP Beaver World on November 21, 2017 at 2:38 am

      Hi

      I updated the code of 3 sections.

      1. Rendering This BB Template
      2. Creating CSS
      3. Enqueue Above CSS and JS Files

      Here is video for setup

      https://youtu.be/HDhte76Mmbs

      • jerzy raczy on December 27, 2017 at 6:22 pm

        Awesome!

        Now the open menu button does not look like hamburger.
        I am using beaver themer with html module.

        This is my project, http://tommyraczy.com
        Please help me.

        • WP Beaver World on December 28, 2017 at 3:45 am

          Can you share the wp-admin access via contact form?

          • jerzy raczy on December 28, 2017 at 8:12 pm

            I already resolved it, thanks!

            So, this effect does not function in mobile right is only for desktop?



          • WP Beaver World on December 29, 2017 at 3:07 am

            Nice.

            Yes. It is for desktop only.



Leave a Comment





Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares