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

How to create 'Quick Menu' as on Learn site?

Solved by Spam Hater View solution

Started by Tom 6 years ago · 6 replies · 2035 views
6 years ago

I am new to GRAV and using the learn2-git-sync) v1.5.8 theme

Question: how do I create the "Quick Menu" as seen in learn.getgrav.org? I don;t see any documentation how.

Example of the "Quick Menu" I am talking about

https://learn.getgrav.org/16/themes/theme-vars

I installed the page-toc plugin and by default the table of content show up on the top of the page.

I would like using the format shown in the "Quick Menu"

5 years ago

Welcome @hosios

You might find it easier to download the skeleton and install in to a fresh directory

https://github.com/getgrav/grav-skeleton-rtfm-site or paul hibbits
https://github.com/hibbitts-design/grav-skeleton-learn2-with-git-sync

Also some more information can be found here on a similar question where Paul has replied in depth.

If you want to use the theme and then use 'inheritance' of the template, it allows you to adapt it further without affecting if the themes get updated.

/forum/support/create-navigation-menu-from-markdown-headers-t8665

which will have pages showing you the data layout etc.

The basic information can be find in the template under the \user\templates\partials\sidebar.html.twig

But there is a a Table of Contents plugin (check the downloads -> plugin and search for TOC which might be easier than recreating / dissecting the code.

After a quick looking at the theme. the code which produces the loop to go through the pages can be found here

It appears in the sidebar in the learn twig, under partials
templates/partials/sidebar.html.twig
the css styling can be found in the scss or css-compiled under

https://github.com/getgrav/grav-learn/blob/develop/themes/learn/css-compiled/template.css - around 2122

learn/blob/develop/themes/learn/css-compiled/template.css around line 2122)

last edited 05/11/21 by pamtbaau
5 years ago

I don't know why (probably I'm missing something) but I can't get it to work. I got the quick menu on my page, with the levels I wanted, but it is placed after the main content of that page (so, mainly useless). I got the css part working (well kinda - at least the numbering and font format and so) but not the placement.

I went trough all the recommended documentation, I looked at the examples, but no luck.

5 years ago Solution

Hi @twye , ok revisited and installed the template and I think you might be wanting not learn2, where the quick menu is not as standard but Learn4 which is the current styling of the learn system, which has the quick menu.

You can get it, but it still is in development , you can download it here.

https://github.com/getgrav/grav-theme-learn4

It is on a completely different css framework (spectre.css) which this and quark themes are based are.

Still need the trilbymedia toc plugin installed and activated.

https://github.com/trilbymedia/grav-plugin-page-toc

Try that first. Remember this is development template so will change a bit, if you are going to customize it , make sure you do in a inherited template,, rather than changing the theme, because your edit / changes will be overwritten on updates.
🙂
Have a go and see what you get.

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 198 2 months ago
Themes & Styling · by Ian, 2 months ago
3 94 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 455 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 48 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 128 3 months ago