Opens in a new tab
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 634 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

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
How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

This tutorial will explain how to enable the AJAX filter with an infinite scroll query loop container, how to add a sorting function, how to…
Read more →
Categories: Bricks, Free
Tags: Filters, Isotope, Query Loop
Pro
CSS Grid for Posts Element in Bricks

CSS Grid for Posts Element in Bricks

The "Posts" element in Bricks has "Grid" as the default layout but the actual CSS it applies on the page feels hacky with negative margins…
Read more →
Categories: Bricks, Pro
Tags: CSS, CSS Grid, Posts
Pro
Dropdown Menu in Bricks using Interactions

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…
Read more →
Categories: Bricks, Pro
Tags: Interactions
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
Ken Burns Background Slideshow in Bricks

Ken Burns Background Slideshow in Bricks

Setting up a hero section, having images that pan and move as a background slideshow with content on top.
Read more →
Categories: Bricks, Pro
Tags: Slideshow
Pro
Stripe’s Animated Gradient in Bricks

Stripe’s Animated Gradient in Bricks

This Pro tutorial provides the steps to set up an animated gradient as a background of a section in Bricks using the code generated by…
Read more →
Categories: Bricks, Pro
Tags: Animations
Pro
Centered Image Logo in Bricks

Centered Image Logo in Bricks

Updated on 8 Mar 2023 This Pro tutorial provides the steps to add a logo image as the center menu item that shrinks when the…
Read more →
Categories: Bricks, Pro
Tags: Header, Sticky Header
Pro
Masonry + Click-type Infinite Scroll in Bricks

Masonry + Click-type Infinite Scroll in Bricks

This Pro tutorial provides the steps to lay out posts in a masonry style with a View More button, which, when clicked, loads the next…
Read more →
Categories: Bricks, Pro
Tags: Infinite Scroll, Masonry