Second (non first) menu-item not selectable (Quark 1.0.2)

[awrog]

Second (non first) menu-item not selectable (Quark 1.0.2)
Reproducible here: menu Seizoen, second item is not selectable (this is also the case for the sub-items). See also below

[duman]

It looks like not the 2nd but below the separator line. As your cursor goes below the line menu disappear.

[awrog]

Can it be fixed?

[rhukster]

I'm not really able to replicate this, I can navigate just fine:

[kiranetph]

It seems it is related to Grav v1.3.10
See : https://discourse.getgrav.org/t/quark-drop-down-menus-issue/5829

[djdakta]

Hi,
It's indeed related to Grav v1.3.10.

[doansson]

Still happening with Grav v1.4

[awrog]

Updated GRAV (1.4.1) and Quark (1.0.2) to latest versions.
The problem still exists.
Tried Win 10 Pro (1920 x 1080) and Win 7 enterprise (1680 x 1050)
Tried Chrome (65 64-bit), FF (59 64-bit) and Edge (41)
You can try it here
Screencast: Chrome, FF and Edge

[rpowers]

I am having this issue as well with 1.4.2 and Safari, Chrome.

Update: adding this to my custom.css seems to fix the issue; not sure if there are downstream effects or not, but I haven't seen any yet.

nav:hover { z-index: 100; }

[awrog]

@rpowers This does the trick!
Thnx!

[duman]

What you do is when you're hovering navigation, setting it's Z index to 100. (Possibly above everything.)

Due to this while hovering the navigation, it'll be always on top. I see nothing wrong with it.

[ghost]

When using maps generated by leaflet by a script the menus are behind the maps. A z-index set in the theme would be generally useful.

[pamtbaau]

Hovering the submenu works fine to me in Quark, however, I do have the same problem when using an inherited theme.

[Goutte]

To reproduce:

1. inherit the quark theme
2. create a template extending the base, say mypage.html.twig:

{% extends 'partials/base.html.twig' %}

{% block content %}
    {{ page.content|raw }}
{% endblock %}

On this page the menu will bug. If you extend modular instead, it works, that's perhaps why you don't see it?

Not 100% sure about these instructions, as I have mathjax, markdown-notices and diagrams plugins enabled, and they may be culprits as well.

---

Thanks @rpowers for the charming fix!

I've found it more resilient to set a z-index to the whole section#header, so that it will also prevent the bug to happen with the language-selector for example.

[pamtbaau]

@rhukster On the forum someone experienced this issue again. Did some research and can reproduce the issue.

Steps to reproduce:

• Fresh Grav installation v1.6.26
• Create the following folder structure:

  pages
  ├── 01.home
  │   └── default.md
  ├── 02.typography
  │   └── default.md
  └── 03.topmenu
      ├── 01.sub1
      │   └── default.md
      ├── 02.sub2
      │   ├── 01.subsub1
      │   │   └── default.md
      │   ├── 02.subsub2
      │   │   └── default.md
      │   └── default.md
      └── default.md
  

• In quark.yaml set header-fixed: false
• Result in browser
  
• In quark.yaml set header-fixed: true
• Result in browser
  

[StevenBrons]

I have the same issue here; does not seem browser dependent.
Setting the "z-index" of #header is a possible fix.

[pamtbaau]

@StevenBrons, Yes, I know. It has been mentioned above. But I don't think the z-index is a possible fix, but rather a possible workaround... ;-)