Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

[quark] mobile menu as the modular page menu

theme

Solved by Vadym View solution

Started by Bruno 4 years ago · 3 replies · 755 views
4 years ago

Hello,
I have a one page modular site and I would like to have the modular menu with mobile or tablet.
At the moment, the mobile menu is empty (only one modular page on my site). I have made an hinerited them from quark. Is there any way to force the mobile.menu to liste the module.menu advises ?
Here is my page : http://bruno-servirlhumanite.fr
Thanks for the help.

4 years ago Solution

try this
in your inheritance theme in templates folder
create a folder named partials (if it doesn't already exists)
then copy from Quark file navigation.html.twig
and replace code with

TWIG
<ul {{ tree ? 'class="tree"' : '' }}>
    {% if show_onpage_menu %}
        {% script at 'bottom' %}
            $('.overlay-menu a').click(function () {
                $('#toggle').toggleClass('active');
                $('#overlay').toggleClass('open');
                $('body').toggleClass('mobile-nav-open');
            });
        {% endscript %}
        {% for module in page.collection() if module.header.visible is not same as(false) %}
            {% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
            <li><a class="{{ current_module }}" href="#{{ module.menu|hyphenize }}">{{ module.menu }}</a></li>
        {% endfor %}
        {% for mitem in site.menu %}
            <li>
                <a {% if mitem.class %}class="{{ mitem.class }}"{% endif %} href="{{ mitem.url }}">
                    {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
                    {{ mitem.text }}
                </a>
            </li>
        {% endfor %}
    {% else %}
        {% import 'macros/macros.html.twig' as macros %}
        {{ macros.nav_loop(pages) }}
    {% endif %}
</ul>
👍 1
4 years ago

@b.da Thanks a lot, that is exactly what I was looking for. I kept the first ligne of the navigation.html.twig file and copy the code you gave me and... that's all!
I am happy with it. Best regards.

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 193 2 months ago
Themes & Styling · by Ian, 2 months ago
3 91 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 451 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 45 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 125 3 months ago