Mobile Menu for Modular Page (Grav issue)

I’ve found a solution for problem with with mobile menu in Grav CMS. Read more for details.

In Gravs default themes there are no modular sections links in the mobile menu.

To fix that simply edit user/themes/[your theme]/templates/partials/base.html.twig mobile-container section like that:

    <div class="mobile-container">
        <div class="overlay" id="overlay">
            <div class="mobile-logo">
                {% include 'partials/logo.html.twig' with {mobile: true} %}
            </div>
            <nav class="overlay-menu">
               {{ block('header_navigation') }}
            </nav>
        </div>
    </div>

Using block function instead of include you’ll repeat upper menu in the mobile container so it will be the same in both places.

This particular issue is described on Gihub:

https://github.com/getgrav/grav-plugin-admin/issues/421



Posted

in

Tags:


Comments

0 responses to “Mobile Menu for Modular Page (Grav issue)”

  1. Jan Avatar
    Jan

    Thank you for your solution, that works. Unfortunately the mobile menu stays in front after klicking an entry. So you have to press the ‘X’ in the top right to close the menu. Is there any workaround?

    1. Konrad Fedorczyk Avatar
      Konrad Fedorczyk

      Hi,
      What kind of template you’re using? Maybe you need to add some CSS/JS to fix that.

      1. John Avatar
        John

        Same here. I’m using the Quark template.
        But I have no idea how to fix that…

        1. Konrad Fedorczyk Avatar
          Konrad Fedorczyk

          Quark is based on Spectre.css. Simply check docs for this framework: https://picturepan2.github.io/spectre/