How to make the title of the dropdown category clickable

Support Themes & Styling
1

Hello,
I started using GRAV some days ago and I am still not very familiarized with TWIG Templating. I am using the theme FUTURE2021 and the thing that I am not able to solve by myself is the following:
In my navbar, I want to have some categories listed with a dropdown menu each. BUT, I also want the category title to be clickable. What happens with this theme is that if assign a dropdown menu to the category, the category title becomes unclickable.
I went to check the template TWIG files of the navbar (user/themes/future2021/templates/partials/navigation.html.twig) with the aim of trying to solve it but I was unsuccessful. The below is the code in the above mentioned directory:

**{% import 'macros/macros.html.twig' as nav_macros %}**

<ul>
  {{ nav_macros.nav_loop(pages) }}

  {% if theme_var('custommenus.enabled') %}
    {% for mitem in theme_var('custommenu') %}
      <li>
        <a href="{{ mitem.url }}" target="{{ mitem.target }}">
          {% if mitem.icon %}
            <i class="fa fa-{{ mitem.icon }}"></i>
          {% endif %}
          {{ mitem.text|raw }}
        </a>
      </li>
    {% endfor %}
  {% endif %}
</ul>

Highlighted what I did not understand: so the code for the navbar is imported from the macros file? Where should I then focus on changing the code? (which I am still far from understanding fully but at least it would be a startā€¦)

In the macro, the part of the navbar code is as follows:

{# MACRO FOR TOP MENU NAVIGATION #}

{% macro nav_loop(page) %}
  {% import _self as nav_macros %}
  {% for p in page.children.visible %}
    {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
    {% if p.children.visible.count > 0 %}
      <li class="{{ current_page }}">
        <a>
          {% if p.header.icon %}
            <i class="fa fa-{{ p.header.icon }}"></i>
          {% endif %}
          {{ p.menu }}
            {% if p.routable ?? false %}&nbsp;<i class="fa fa-angle-down"></i>
            {% endif %}
        </a>
        <ul>
          {{ nav_macros.nav_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 %}
          <span>{{ p.menu }}</span>
        </a>
      </li>
    {% endif %}
  {% endfor %}
{% endmacro %}

Maybe this is too much of a rookie question and I want to make too much personalization for what my current abilities with TWIG areā€¦ Anyway, thanks in advance to anyone who might be able to help here.
Cheers :slight_smile:

2

Hi @piccolopi

After reading your post, I still donā€™t understand some things.
First, why do you want the title of a parent menu item, which contains children, to be clickable? The theme menu is built from the site pages, with children, and made visible in the menu. All of those options are Grav options, not the theme. If you take a look at any navigation templates from other Grav themes, you will see that the operation is similar to that of the Future2021 theme.
Secondly, what have you done so far to create the menu you want?
Maybe I need some extra information to help you, such as what page structure you have, and what your menu options are (are they visible or not, routable or not, etc.).

3

I have also wanted to do this sometimes. The reason is that you can provide a ā€œlandingā€ or entry page introducing some of the child pages in a little more detail. The theme I most recently wanted to do this with drops its navigation menu down on click. Some just require hover. I wanted hover to show the child pages and click to open the landing page. Of course, the hover will not work on some devices, but most of those will use a different mobile menu. However, child pages are still easily discovered.

But I agree we donā€™t have quite enough context to help without time-consuming guesses. Some of the code @piccolopi has highlighted causes me to think they might not be very familiar with some techniques used in HTML (like fa icons). Is that correct?

You can hack templates in your theme directly but it will not survive updates. If you are careful and just exploring, this is a simple way to start though. The chapter on Themes explores some options to customise your theme and about Twig. I personally use the inheritance method described there to override templates so that they donā€™t get overwritten when the theme is updated.

If you are struggling mainly with the Twig and know the HTML you want, perhaps we could help you get there, using Twig, if you post here the HTML markup you want to end up with.

Also, you can try adding your question as an issue in the themeā€™s Github repo (oops, that theme is maintained by @pmoreno but itā€™s still a good general strategy)

1 Like
4

Thatā€™s not entirely correct. Grav core only creates a page collection based on the file hierarchy. It is the theme that creates menus based on the page collection.

I picked a few: Quark (the poster theme), Antimatter, Gateway, Landed, Lingonberry and Solarize. All of these themes allow the user to navigate to the page represented by the top menu-item of a dropdown menu. So far, Future2021 seems to be the exceptionā€¦

5

The original Future theme, from HTML5Up, is not a theme with a multi-level navigation bar, so when I started creating the Future2021 theme for Grav, I wanted to add this option, since Grav offers that possibility, thanks to the use of macros with Twig. It is true that, when you are designing a theme, you think about how it should be used, what options it should have, etc., and all of that is very subjective on the part of the theme author.

Thanks to forums, like Discourse, and networks like Discord, we are learning every day about how to improve the themes we offer to the community. For this reason, and taking into account your suggestions (thanks @pamtbaau and @hughbris) and the concerns of the users of the themes, I have made some changes to the Future2021 theme to improve the navigation system, to assimilate it to other themes and give freedom to the user to use the navigation links however you want.
Likewise, I have eliminated the small script that opened and closed the menu items with children, in the mobile version, so now all the menus and their children are displayed as in themes like Solarize or Landed. I have opted for this modification, to also be able to offer in that menu the option that menu items with children can be clickable.

I would like to count on your collaboration to carry out a simple test of the demo page and verify that it works well.

6

This is a question that I often find myself asking. I have ported quite a few HTML5 themes (many are not in the repository for different reasons, sometimes just lethargy!). I always start with the intention of doing a ā€œpureā€ implementation of the source theme.

However I do think of improvements, like yours, and sometimes get requests via issues or PRs for enhancing functionality. I tweak CSS to improve its flexibility (or add element support), often add or improve alt text handling, and add minor options like menu features. Also I update JS libraries that are bundled, especially when Dependabot prods me :slight_smile:

I kind of take the approach that I want to keep my demo close to the original. Sometimes I add an ā€˜Elementsā€™ page where itā€™s not provided because it helps me get a sense of the themeā€™s coverage.

I felt the need to share that tangential information. It doesnā€™t progress the original topic but is good to get out of my head!

7

Ah, just a front end test. The code is not yet in the repo from a quick look. It works well and also for sub-submenus!

(I also see in the repo that you have provided several documented enhancements from the source theme so my comments about diverging from the source theme seem to be inapplicable. Itā€™s a great list of enhancements!)

We can possibly mark this as solved for the original question. Iā€™m not sure @piccolopiā€™s Twig curiosity has been satisfied though :confused:

8

I just updated the theme repository. Iā€™ve included some visual improvements to the mobile menu.
I will release the next version shortly. Thank you very much @hughbris and @pamtbaau for your suggestions and help.

2 Likes
9

Hello @pmoreno, @hughbris and @pamtbaau. I was waiting for Sunday to be able to research and answer with calm.

This above was exactly my intention.

I have used fa icons on an only HTML and CSS website (without CMS) that I built so I understand how they work. However, I was struggling to understand how I could make a modification to the theme because I am still reading and researching about how to use TWIG templating, where to make it custom so that it doesnā€™t break, all in all, very rookie beginnings.

I was assuming this all the time, that it was a theme functionality what I was looking for.

Wow. I honestly was not expecting this at all. Thank you a lot. I am sorry I did not provide better information in the beginning. The code I shared is where I thought was the part to be changed.
I have tested the demo and now the menu items are clicklable, and so are the submenus with sub-submenus. Itā€™s amazing!!

More than satisfied, I am blown away. This has been my first ever post in any forum (I am sure you could tell :disappointed_relieved:) and I was not expecting this much help, and for sure not a theme upgrade. Thank you a lot, truly! :pray: I need to study/practice for some time to be able to make better informed questions and maybe even contribute in answering when I know more.
And thanks a lot for the Future2021 template in general @pmoreno, is very very pretty and functional!

2 Likes