The sign +In sub menu

Support Themes & Styling
1

Hi, i have another question about the submenu…always in quark theme…I attach a screenshot, I would not see the “+” sign to open the submenu, but directly click on the menu item to bring up the submenu … how can I do? thank you in advance…

IMG_20180830_122109
IMG_20180830_122109.jpg720×1280 126 KB

2

I don’t consider the following really as a solution, but rather a hacky override of ‘jquery.treemenu.js’ (which runs the menu) plus some required css compensation.

  • Create inherited theme from quark-open-publishing if not already.
    Use either of the following two options:

  • Copy file ‘/user/themes/quark-open-publishing/templates/partials/navigation.html.twig’ into folder ‘/user/themes/mytheme/templates/partials’

  • Change the following lines in your copy of ‘navigation.html.twig’…

    {% if p.children.visible.count > 0 %}
   <li>
      <a href="{{ p.url }}" class="{{ active_page }}">

    …into

    {% if p.children.visible.count > 0 %}
   <li>
      <a class="toggler {{ active_page }}">   <- only changed line

    Note:

    • Removing the ‘href’ prevents the <a> from opening the page it referred to.
    • Class ‘toggler’ tells ‘jquery.treemenu.js’ to use the <a> to open/close the submenu.

  • Add the following lines to ‘/user/themes/mytheme/css/custom.css’:

    .treemenu .toggler {
    display: contents;
 }

.treemenu li.tree-empty > .toggler:before {
    content: initial;
}

.treemenu li {
    padding: 0;
    margin: 1rem 0;
}

Disclaimer:

  • Not tested on real mobile phone, but emulated mobile display using Chrome developer tools on Windows 10.
  • It does not work for all browsers since ‘display: content’ is not supported by all browsers. See Can I Use. If not supported, the layout will be horrible.
  • Not tested if multi-level submenu’s work.
  • Test in your own and visitors context.
1 Like
3

Thank you so much…it works!!!