23rd Jul '23
/
0 comments

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..

How to create filters with IsotopeJS in Bricks (Part 1)

How to create filters with IsotopeJS in Bricks (Part 1)

This tutorial series will explore the IsotopeJS library's features inside the Bricks ecosystem.
Read more →
Categories: Bricks, Free
Tags: Filters, Isotope
Pro
Bricks Query Loop Cards with Hover Image

Bricks Query Loop Cards with Hover Image

How images uploaded to posts can appear when the featured images in a Bricks posts query loop are hovered.
Read more →
Categories: Bricks, Plugins, Pro
Tags: Hover Image
How to add a resizable desktop navbar in Bricks

How to add a resizable desktop navbar in Bricks

This tutorial will show you how to add a "More" menu item when the navbar overflows on desktop.
Read more →
Categories: Bricks, Free
Tags: Menu, Nav Menu
Animated Border Hover Effect Buttons

Animated Border Hover Effect Buttons

Here's how can be implemented in HTML/WordPress/Bricks. Step 1 Add this CSS in your child theme's style.css or another appropriate location: Step 2 Add a…
Read more →
Categories: Free
Tags: Animations, CSS
Pro
Responsive iframes in Bricks

Responsive iframes in Bricks

This Pro tutorial provides the steps to add responsive iFrames in Bricks. Step 1 Edit your Page/Template with Bricks. Add a Code element having this…
Read more →
Categories: Bricks, Pro
Tags: iframes
Pro
Fixed Sidebar Layout in Bricks

Fixed Sidebar Layout in Bricks

A user asked: This Pro tutorial provides the steps to set up a fixed left (or can be on the right) sidebar using hooks and…
Read more →
Categories: Bricks, Pro
Tags: Fixed Sidebar, Hooks, Layout
Pro
Team Member Photos Stack with Hover Tooltips in Bricks

Team Member Photos Stack with Hover Tooltips in Bricks

Herman Baiatian shared in the Bricks Facebook group here that he worked on overlapping team member headshots showing info in hover tooltips. I recreated it…
Read more →
Categories: Bricks, Plugins, Pro
Tags: UI Pattern