11th Nov '22
/
5 comments

Opening Submenus with Click Instead of Hover in Bricks

This Pro tutorial provides the code for opening submenus with click instead of hover in Bricks.

Note

This has been tested only with top-level menu items that have submenus and not nested submenus.

Step 1

Add this in child theme's style.css:

body .brxe-nav-menu .bricks-nav-menu li:hover > .sub-menu, body .brxe-nav-menu .bricks-nav-menu li[aria-expanded="true"] > .sub-menu { opacity: 0; visibility: hidden; }

Step 2

Let's load a custom script.js file by implementing the Enqueueing a JavaScript File in Bricks tutorial.

Step 3

Paste the following JS inside script.js:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:
Bricks
JavaScript
Nav Menu
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
Post Title at a Different Location on Image Hover

Post Title at a Different Location on Image Hover

This Pro tutorial provides the steps to update the text of a sticky div with the title of the post that is hovered on the…
Read more →
Categories: Bricks, Pro
Tags: JavaScript
How to Create a Grid Slider in Bricks

How to Create a Grid Slider in Bricks

In this tutorial, we'll learn how to create multiple rows and columns inside the default nested slider of Bricks. Introduction A user recently asked in…
Read more →
Categories: Bricks, Free
Tags: JavaScript, Nested Slider
Pro
WP Grid Builder Filters inside Bricks’ OffCanvas

WP Grid Builder Filters inside Bricks’ OffCanvas

This Pro tutorial provides the steps to move WP Grid Builder's filters inside the Bricks' native Offcanvas on smaller viewport widths. Let's work with the…
Read more →
Categories: Bricks, Plugins, Pro
Tags: JavaScript, WP Grid Builder
Pro
tsParticles in Bricks

tsParticles in Bricks

Updated on 5 Aug 2023 This Pro tutorial provides the steps to set up tsParticles, a lightweight TypeScript (uses JavaScript) library for creating particles as…
Read more →
Categories: Bricks, Pro
Tags: JavaScript
Pro
Grid.js in Bricks

Grid.js in Bricks

This Pro tutorial provides the steps to use Grid.js in a WordPress site powered by Bricks builder. Grid.js is a lightweight and performant JavaScript library…
Read more →
Categories: Bricks, Pro
Tags: Grid.js, JavaScript
How to sync two nestable sliders in Bricks

How to sync two nestable sliders in Bricks

In this tutorial, we'll learn how to sync two nestable sliders in Bricks: one will be the main slider and the other one will be…
Read more →
Categories: Bricks, Free
Tags: JavaScript, Nested Slider
How to change the text of an element based on breakpoints without creating duplicated content

How to change the text of an element based on breakpoints without creating duplicated content

In this tutorial, we'll learn how to dynamically change the text of a basic text element based on the viewport width in Bricks. Introduction Sometimes…
Read more →
Categories: Bricks, Free
Tags: JavaScript
Pro
Switching Tabs on Hover in Bricks

Switching Tabs on Hover in Bricks

This Pro tutorial shows how to make the tabs of Tabs (Nestable) elements active on hover in Bricks. Step 1 Add one or more Tabs…
Read more →
Categories: Bricks, Pro
Tags: JavaScript, Tabs