23rd Jul '23

Codrops Dynamic Shape Overlay in Bricks

This Pro tutorial provides the steps to implement Codrops' SVG shape overlay in Bricks.

We shall display a WordPress menu in the overlay after an hamburger button is clicked/tapped with nice fluid animations.

Step 1

If a child theme is not already active, upload and activate it.

Create a directory called assets in the child theme directory and inside that, css and js directories.

Upload easings.js to assets/js.

Upload demo3.js to assets/js.

Create a file named demo.css in assets/css having:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:

Bricks

Menu Overlay

Pro

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro

Dropdown Menu in Bricks using Interactions

This Pro tutorial provides the steps to toggle a WordPress menu when a div is clicked using the Interactions feature in Bricks. When clicked: Step…

Categories: Bricks, Pro

Tags: Interactions

Pro

Sticky Scrolling in Bricks Builder

Updated on 22 Apr 2024 This Pro tutorial provides the steps to fix elements in the viewport i.e., make them sticky while adjacent content in the section…

Categories: Bricks, Pro

Tags: CSS

Download Area with HappyFiles

Aside from the series I'm currently writing on how to create custom galleries and sliders with HappyFiles, Metabox and Bricks, I have developed a snippet…

Categories: Free, Plugins

Tags: HappyFiles

Pro

“Pro” Category Ribbon for Posts in Bricks

This Pro tutorial provides the steps to show a "Pro" ribbon for posts that are categorized under the "Pro" category when using Bricks builder. Step…

Categories: Bricks, Pro

Tags: Dynamic Data

Pro

Mmenu Light in Bricks

Here's the steps to implement Mmenu Light for a sliding OffCanvas mobile menu in Bricks.

Categories: Bricks, Pro

Tags: Mmenu, Offcanvas

How to add SVG icon as list item bullets

Add this sample CSS: Replace brxe-list with the class of your ul element. Here's how you can generate the value of background-image property: Copy your…

Categories: Free

Tags: CSS

Pro