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 526 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Meta Box/ACF Images Staggered Grid Gallery in Bricks

Meta Box/ACF Images Staggered Grid Gallery in Bricks

Showing images from two Gallery-type of ACF or Image Advanced-type of Meta Box fields in a staggered grid layout.
Read more →
Categories: Bricks, Plugins, Pro
Tags: ACF, Image Gallery, Meta Box
Create a App-Like Navigation in Bricks

Create a App-Like Navigation in Bricks

I've promised a few folks in the Facebook group to create a tutorial on how to create an app-like navigation in Bricks like in the…
Read more →
Categories: Bricks, Free
Tags: Menu, Navigation
Pro
Search Results Template in Bricks

Search Results Template in Bricks

Updated on 26 Oct 2023 This Pro tutorial provides the steps to set up a search template in Bricks with these features: Step 1 Create…
Read more →
Categories: Bricks, Pro
Tags: Search Results
Width and Height of Mobile Hamburger Toggle in Bricks

Width and Height of Mobile Hamburger Toggle in Bricks

Looking to change the size of Bricks hamburger toggle in the mobile menu? The default width value of 20px can be changed by selecting the…
Read more →
Categories: Bricks, Free
Tags: CSS, Mobile Menu
Pro
Horizontal Scrolling Tabs in Bricks

Horizontal Scrolling Tabs in Bricks

Nestable Tabs element in Bricks wraps into multiple lines out of the box at smaller viewport widths. This Pro tutorial provides the steps to remove…
Read more →
Categories: Bricks, Pro
Tags: Tabs
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: Hooks, Layout
Pro
Custom WordPress Dashboard Page in Bricks

Custom WordPress Dashboard Page in Bricks

Updated on 10 Jul 2024 This Pro tutorial provides the steps to replace all the meta boxes of the WordPress admin dashboard page with the…
Read more →
Categories: Bricks, Pro
Tags: Dashboard