28th Sep '23
/
0 comments

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 1

At Appearance → Menus create a navigation menu having top-level items.

Ex.:

Step 2

Copy the following JSON code and paste it in your Bricks editor.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:
Bricks
Interactions
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
Button-specific HTML in Bricks Popup

Button-specific HTML in Bricks Popup

In the Bricks Facebook group a user asks: I need to create popups to expend the text (eg. read more). I wonder if I have…
Read more →
Categories: Bricks, Pro
Tags: Interactions, JavaScript
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
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
Pro
Codrops Dynamic Shape Overlay in Bricks

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…
Read more →
Categories: Bricks, Pro
Tags: Menu Overlay
How to add SVG icon as list item bullets

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…
Read more →
Categories: Free
Tags: CSS
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
How to Push The Footer Down in Bricks

How to Push The Footer Down in Bricks

Looking to have the footer stay at the bottom of the browser window in your Bricks site? Simply add this CSS: There are several places…
Read more →
Categories: Bricks, Free
Tags: Footer
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