Quark Open Publishing: Top level drop-down menu, how to make 'non-clickable'

Hi all, super easy question but I am stumped.
I've got a basic sub menu structure.

• I enabled "Display Dropdowns in Menubar" in MyTheme inherited from OpenPublishing/Quark
• I made a page to be my top-level menu item
• I made some sub-pages, which show up nicely as a tidy drop-down menu

I want the top level menu item to be non-clickable. I just want it to pull down the sub menu, there is no content on that page and being able to click the menu item breaks the ux. Is there a setting or method for this?

Many thanks,
Joel

Hi Joel,
welcome to the grav community 😃
you should be able to achieve what you want by applying some CSS to your top-level menu.
pointer-events would be the hint .
also note, when changing your theme's CSS, best practice is to create a child theme,
see theme inheritance

Update: This "solution" only works when using Quark itself, not when using OpenPlublishing. See next reply.

Original:
@joel-marks I see two options to fix the issue:

1. The css option mentioned by @hoernerfranz (thanks I didn't know about pointer-events) might do the trick, but I fail to find the right selector for individual toplevel-menuitems having a dropdown. Standard OpenPublishing/Quark does not add any specific classes/attributes for toplevel menuitems which have a submenu.
2. Or you could alter the macro "/user/themes/<your-inherited-theme>/templates/macros/macros.html.twig" (Copy from "/users/themes/quark/templates/macros/macros.html.twig") and change line 7 from:
   TWIGCopy

   <a href="{{ p.url }}" class="{{ active_page }}">
   

   into:

   TWIGCopy

   <a class="{{ active_page }}">
   

   You could of course use your own preferred element instead.

Hope this helps...

I'm really surprised at this. I would consider this a core functionality UX issue, rather than a hack around the edges kind of thing 😕

@hoernerfranz -I am not sure how to approach your solution. I lack the technical skills perhaps. I can hack at css but not write it. Inspecting the element finds no selector that I can address specifically with css. I like the solution of turning off the pointer events, it seems elegant. If you have time, perhaps you could give me some more help?

@pamtbaau Thank you so much. Sadly I am not having any luck with your second solution, the macro alteration. I wonder if I am doing something wrong? To be specific, I have followed your instruction to the letter (I think)!

This it the resulting macro.html.twig, which I put in my child theme

{% macro nav_loop(page) %}
  {% import _self as macros %}
  {% for p in page.children.visible %}
{% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
{% if p.children.visible.count > 0 %}
  <li>
    <a class="{{ active_page }}">
    </a>
    <ul>
      {{ macros.nav_loop(p) }}
    </ul>
  </li>
{% else %}
  <li>
    <a href="{{ p.url }}" class="{{ active_page }}">
      {{ p.menu }}
    </a>
  </li>
{% endif %}
  {% endfor %}
{% endmacro %}

@joel-marks, I think I can agree with you that the current design of the menu is not an ideal UX experience. This also plays out on mobile where the user has to tap the tiny "+" (phone) or "v" (tablet) next to the menu-item.

Instead of removing the href like that, I'd rather add a condition:

<a {% if not p.header.unclickable %} href="{{ p.url }}" {% endif %} class="{{ active_page }}">

And then, add in the frontmatter of this page:

unclickable: true

But more important, wouldn't be easier to replace your parent page by a folder ?

- Page 1
     page.md
- Page 2
     page.md
- Folder
    - Subpage 1
        page.md
    - Subpage 2
        page.md
    ...

@AmauryH, To reflect on your suggestions:

1. Per page based solution:
   Your suggestion of using a setting in the frontmatter of child pages may certainly have its use-cases. However, I'm not sure if this will improve UX. The user might not appreciate different behaviours for similar looking menu-items.

2. Empty parent folders
   I don't think this will solve the issue raised by OP. Grav will still create a clickable menu-item for the empty parent folder.

   Also, the urls of the child pages suggest there is a parent page. The user might be tempted to explore.
   Without a page in the parent folder, the user will then receive a 404. Adding a parent page might give the user more explanation.

@pamtbaau:
<a class="{{ active_page }}">

Thanks so much @pamtbaau your solution works.
@AmauryH thanks for your suggestion too, I like the added functionality, but I see what @pamtbaau means regarding non-standardisation of UX elements leading to user confusion.

There is one last UX issue, although it's not a deal breaker: The mouse-over state for the top-level of the menu is, rather incongruently 'input-bar'... implying there is a user action that can take place on the element.

Do let me know if you have any thoughts as to how I could remove this mouseover state and just have the mouse cursor remain the same.

Thanks so much everyone, I could not have done this by myself 😃

@joel-marks, Do you mean you want the cursor icon to remain a pointer?

You could expand on the solution by adding a class to the anchor <p> as follows:

<a class="disabled-menu {{ active_page }}">

And use some css:

.navbar .disabled-menu {
   cursor: default;
}

@pamtbaau Thank you, that works like an absolute charm 😇😃👌

I have the same requirement but in Gantry 5, using the Hydrogen theme. I am aware that this is a completely different theme. How would one go about achieving the disabling of the top level menu just the same in this theme?

Using pointer-events: none is not much use as you cannot identify just that single top level menu item - the whole menu gets pointer-events turned off.