11th Nov '22

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:

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

Related Tutorials..

Pro

How to Limit the Depth of Nav Menu in Bricks

Updated on 31 Oct 2023 This Pro tutorial provides the steps for limiting the depth of WordPress navigation menu rendered via Bricks' Nav Menu element.…

Categories: Bricks, Pro, WordPress

Tags: bricks/element/settings, Nav Menu

Pro

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…

Categories: Bricks, Pro

Tags: JavaScript, Tabs

Pro

[WooCommerce] Sticky on Scroll Add to Cart section in Bricks

Setting up a sticky section that fades in when scrolling down and fades away when scrolled to the top.

Categories: Bricks, Pro

Tags: JavaScript, sessionStorage

Pro

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…

Categories: Bricks, Pro

Tags: JavaScript

Pro

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…

Categories: Bricks, Pro

Tags: Grid.js, JavaScript

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.

Categories: Bricks, Free

Tags: Menu, Nav Menu

Opening RSS Block’s Links in New Tabs

Looking to have links output by RSS Block (in the block editor) in new tab/window when using Bricks? Add this in your Bricks template/Page at…

Categories: Bricks, Free

Tags: JavaScript

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…

Categories: Bricks, Free

Tags: JavaScript, Nested Slider

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…

Categories: Bricks, Free

Tags: JavaScript

View All Tutorials