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..

Setting Active Tab in Bricks’ Tabs (Nestable) Element

Setting Active Tab in Bricks’ Tabs (Nestable) Element

With Bricks' Nestable tab element, here's how we can set which tab is active by default.
Read more →
Categories: Bricks, Free
Tags: JavaScript, Tabs
Adding MENU Text After Hamburger Icon in Bricks

Adding MENU Text After Hamburger Icon in Bricks

Update: Check out a better version by Jeff Brigman here. Looking to add the word MENU before or after the hamburger menu icon in Bricks?…
Read more →
Categories: Bricks, Free
Tags: Nav Menu
Opening RSS Block’s Links in New Tabs

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…
Read more →
Categories: Bricks, Free
Tags: JavaScript
Pro
How to Link to a Specific Tab in Bricks

How to Link to a Specific Tab in Bricks

This Pro tutorial provides the JavaScript code that will automatically switch to the tab when using Nestable Tabs elements based on the "tab" URL parameter…
Read more →
Categories: Bricks, Pro
Tags: JavaScript, Tabs
Pro
Menu Item Descriptions in Bricks

Menu Item Descriptions in Bricks

Updated on 17 Jul 2023 This Pro tutorial provides the steps to show descriptions for nav menu items with the corresponding CSS styling for desktops…
Read more →
Categories: Bricks, Pro
Tags: Nav Menu, walker_nav_menu_start_el
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
[WooCommerce] Sticky on Scroll Add to Cart section in Bricks

[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.
Read more →
Categories: Bricks, Pro
Tags: JavaScript, sessionStorage
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