Problems with drop-down menu

Hi everyone,

I was asked to redo a GRAV site that I built previously using customised Learn2 template. The new template should be X-corporation.

I had a certain suspicion that it would not be a piece of cake, but the task seems even trickier. The most pressing issue is that the drop-down menus at the top of the page do not work. To be exact - they drop a white rectangle but it does not contain anything. This is the page code:

<li class="dropdown m-menu-fw ">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">Student
                <span><i class="fa fa-angle-down"></i></span></a>

                                        <ul class="dropdown-menu">
                                            <li class="m-menu-content">
                            <ul class="col-sm-6">
                                                        </ul>
                        </li>
                                            <li class="m-menu-content">
                            <ul class="col-sm-6">
                                                        </ul>
                        </li>
                                        </ul>

These two empty list items should contain subdirectories names, right? (At least this is how it worked it Learn2.) Anyway, the structure of directory student is as follows:

grav/user/pages/02.student$ tree
.
├── 01.pokus_jedna
│   └── default.cz.md
├── 02.pokus_dva
│   └── default.cz.md
├── default.md
└── default.md~

Would you kindly point me in the right direction? I UTFGed, but found nothing useful.

You help is greatly appreciated,
Sue

I installed the skeleton for X-corporation, upgraded everything using bin/gpm selfupgrade and bin/gpm update and installed admin using bin/gpm install admin.

Everything is working just fine...

First thought:

• Using the browser, can you check if the list elements for the dropdown menu are being created? Something like:

  HTMLCopy

  <li class="dropdown m-menu-fw ">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle">Features
          <span><i class="fa fa-angle-down"></i></span></a>
  
      <ul class="dropdown-menu">
          <li class="m-menu-content">
              <ul class="col-sm-6">
              </ul>
          </li>
          <li class="m-menu-content">
              <ul class="col-sm-6">
                  <li class="dropdown-header">Grav</li>
                  <li>
                      <a href="/grav/site-x/features/grav/enjoyable-content-creation">Enjoyable Content Creation</a>
                  </li>
                  ... other menu items
              </ul>
          </li>
      </ul>
  </li>
  

If there are no <li class="m-menu-content"> elements, the menu will be empty.

Looking further:
The dropdown seems to be generated using css which could fail when elements, classes or attributes have been changed:

• Have you changed any classes, attributes, elements, or whatever in navbar.html.twig?
• And/or did you change any css related to dropdown, menu, etc?

I´ve got the same problem with pure-blank theme generated by grav.

navigation.html.twig:

{% macro loop(page) %}
    {% for p in page.children.visible %}
        {% set current_page = (p.active or p.activeChild) ? 'selected' : '' %}
        {% if p.children.visible.count > 0 %}
            <li class="has-children {{ current_page }}">
                <a href="{{ p.url }}">
                    {% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
                    {{ p.menu }}
                </a>
                <ul>
                    {{ _self.loop(p) }}
                </ul>
            </li>
        {% else %}
            <li class="{{ current_page }}">
                <a href="{{ p.url }}">
                    {% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
                    {{ p.menu }}
                </a>
            </li>
        {% endif %}
    {% endfor %}
{% endmacro %}

<ul>
    {% if theme_config.dropdown.enabled %}
        {{ _self.loop(pages) }}
    {% else %}
        {% for page in pages.children.visible %}
            {% set current_page = (page.active or page.activeChild) ? 'selected' : '' %}
            <li class="{{ current_page }}">
                <a href="{{ page.url }}">
                    {% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}
                    {{ page.menu }}
                </a>
            </li>
        {% endfor %}
    {% endif %}
    {% for mitem in site.menu %}
        <li>
            <a href="{{ mitem.url }}">
                {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
                {{ mitem.text }}
            </a>
        </li>
    {% endfor %}
</ul>

@tacuarimedia I'm not sure if your issue is the same as the issue mentioned by OP.

Nevertheless, I installed a fresh Grav and created a 'pure-blank' theme. Guess what... the submenu doesn't work...

I think the reason is an error in navigation.html.twig on line 26:

{% if theme_config.dropdown.enabled %}

When I dump the variable theme_config it appears not to be defined (null). When using variables config.theme or theme to access the configuration for the theme, proper values are returned and the submenu works.

Solution: (For pure-blank theme only)
Change line 26 of navigation.html.twig into:

{% if config.theme.dropdown.enabled %}

or the shorthand

{% if theme.dropdown.enabled %}

Problem has been introduced last June when updating base.html.twig. I've added a comment on that commit for the devs to fix.

@tacuarimedia, Issue of missing theme_config variable in pure-blank theme has been fixed in 'develop' branch and will soon be available in update.

Update: Fix has been merged into new release v1.2.4 of devtools. Creating new 'pure-blank' theme will correctly show dropdown menu items.