How to prevent Nav Menu parent briefly opening the sub menu if clicking through to the Parent link page

How To
1

Hi there,

Bricks 2.3.10

If I have a Nav Menu with sub menu items, how can I prevent the sub menu showing briefly if the user clicks on a parent menu item that is set to directly go to a page? (Not a Custom Link set to “#”). It looks a little odd seeing the sub menu flash open given that it serves no purpose. Sub menu is set to “Position: Static”.

Example here: https://bricksmenutest.jtxweb.net/

3

Hi,
This is expected with the Nav Menu element when Sub menu > Position: Static is enabled. Static submenus are placed in the document flow and are toggled on click, so a click on a parent item that also has a submenu can briefly open it before the browser navigates to the linked page.

To avoid that flash, use one of these setups:

  • Disable Position: Static if the submenu does not need to sit in the document flow.
  • Make the parent item a non-navigating item instead of a link (probably the best option)

Alternatively, you could try using nav nestable, where the dropdown trigger behavior can be controlled more explicitly.

4

Thanks for the fast reply. Unfortunately we need it position static and the client wants the behaviour to remain. Is there another option? Maybe a little JS snippet I can target a class with?
Nav nestable seems like it would be complicating it much more so I’m not keen on that option either.

6

If you want to keep the parent link and only stop this on selected menu items, add a custom class to those parent menu items (you can enable classes in the WP menu dashboard under screen options at the top), for example no-submenu-flash, and add this custom JS (in a code element below the menu, or in the template/Bricks settings):

document.addEventListener(
'click',
function (event) {
const link = event.target.closest(
'.bricks-nav-menu li.no-submenu-flash > .brx-submenu-toggle > a[href]'
)

if (!link) {
  return
}

const href = link.getAttribute('href')

if (!href || href === '#' || href.startsWith('#')) {
  return
}

event.preventDefault()
event.stopImmediatePropagation()

window.location.href = link.href
},
true
)
1 Like
7

Thanks Stefan! Appreciated.