Quark: Dropdown menu, make top-level 'non-clickable'

Support Themes & Styling
1

Using theme Quark, how would I make a top-level dropdown menu non-clickable?

All help appreciated! [And why is this hard - it seems to be a basic usability requirement.]

2

@andro, To make a toplevel dropdown menu item non-clickable in theme Quark, you can do the following:

  • Create an inherited theme based on Quark. See Theme Inheritance. Using the cli is the most easiest procedure.
    If you don’t create an inherited theme, you will lose all changes when Quark gets updated.
    I’ll asume you named it ‘mytheme’.
  • Copy file user/themes/quark/templates/macros/macros.html.twig into folder user/themes/mytheme/templates/macros/
  • In the copied file, replace lines 6-13 with:
    {% if p.children.visible.count > 0 %}
  <a class="{{ active_page }}"> {# Without 'href' it doesn't do anything #}
    {{ p.menu }}
  </a>

  <ul>
    {{ macros.nav_loop(p) }}
  </ul>
{% else %}
  <a href="{{ p.url }}" class="{{ active_page }}">
    {{ p.menu }}
  </a>
{% endif %}

The toplevel menu item will now be unresponsive and only shows its child pages.

And why is this hard - it seems to be a basic usability requirement.

It is a design choice of the devs. Some want it to be clickable, other don’t. They could have make it an option in the theme though.

1 Like
3

@andro, Any luck yet in making the top-level menu-item of a dropdown non-clickable?