Problems with drop-down menu

Support Themes & Styling
1

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

2

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:
    <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?
3

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>
4

@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.

1 Like
5

@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.

7

Pamtbau, thanks for your time and effort. Starting with fresh grav installation was a briliant idea (I have reinstalled grav a couple of times by now and I am getting really good at that :wink: )

The problem with the empty drop-down menu - i. e. items actually rendered on the pages but empty - is cause by X-corporation’s menu philosophy, as I found out by trial and error (lots of errors :star_struck:). This behaviour might seem normal to those who have experience with different grav templates than Learn2 but it caused nightmares to me.

The solution for a working drop-down menu - if anyone ever encounters the same problem - is viewing the top folders as captions for the columns which will be rendered. Only the subfolders that one places within these 1-5 main folders (aka columns of the menu) will be visible on the page and clickable. This is the correct folder structure (as opposed to the one derived form Learn2 in the original post):

grav/user/pages/04.ostatni$ tree
.
├── 01.prvni
│   ├── 01.pokus01
│   │   ├── default.cz.md
│   ├── 02.pokus02
│   │   ├── default.cz.md
│   ├── default.cz.md
├── 02.druha
│   ├── 01.pokus01
│   │   ├── default.cz.md
│   ├── 02.pokus02
│   │   ├── default.cz.md
│   ├── default.cz.md

And this is the output od the page:

menu
menu881×264 39.6 KB

1 Like