Hello, I use Mache theme, it is very nice,
I used the blog section to place there only the products pages, I like the way the blog presents and paginates the products.
I looked into Mache menu.css and style.css files and I do not see drop-down menu styles. My question is, is it possible to enable a drop-down menu for the blog of Mache theme? ¿How?. If not, is there a tutorial on how to create a drop-down menu for the blog items of Mache theme?.
Thanks and regards
Had a quick look at this theme for your question, the site.css does not include any dropdown menu options / theming.
What are you trying to achive with the dropdown (how will the user interact with it, what will the sub / dropdown menu items be, what will they to relate to. If you can give us a bit more information I should be able help you
Hello @spamhater and thanks for your reply. I would like to do same as with Deliver Theme, where the drop-down menu can be set to on and it takes all blog categories of all articles and it creates a sub-menu with them grouping the articles with same category under the corresponding submenu category. Same as with Deliver Theme, I do not know if I explain myself well.
Thanks for any information to create such type of menu on Mache Theme.
Regads
[…] Deliver Theme, where the drop-down menu can be set to on and it takes all blog categories of all articles and it creates a sub-menu with them grouping the articles with same category under the corresponding submenu category.
Could it be you are mistaken? I don’t believe theme Deliver does have such dropdown menu. Yes, it can create a dropdown when setting dropdown: true and when all blog item folders have been given a number (to make them visible). However, the dropdown is not grouped in categories.
I also don’t find any functionality for that (dropdown grouped by category) in the templates (partials/navigation.html.twig).
@joejac, do you have a visual example of something you have seen it doesnt need to be a grav theme ?, as @pamtbaau and I did say, both of these themes do not have a drop down menu as default. A theme doesnt automatically create dropdown menu by just enabling the dropdown : true in a yaml/blueprint, it has to have template code and css “made” to get it working.
It sounds really weird on what you are actually trying to achieve, blogs usually have lots of posts, which would make a drop down menu rather big, rather quickly. You can have a potentially menu of catogeries under the blog menu
Can you come back to us with a few links of the thing you have in your mind and we can then potentially get some code to add to the themes
HTH
Ok after having another look I think I may have cracked it without rewritting the theme.
This method should be used on any theme you want to adapt.
Go to the theme folder (Mache)
edit the template yaml file (mache.yaml)
add the line
blogonmenu:
enabled: true
directory: '/blog'
title: Blog
and save the file
Then go to the themes partial folder and look for the navigation.html.twig (/user/theme/mache/templates/partials/navigiation.html.twig)
In this themes case we are adding this new bit of new code after the first {% endfor %}
{% if theme_config.blogonmenu.enabled %}
{% set current_page = (p.active or p.activeChild) ? ' active' : '' %}
<li class="menu-item{{ current_page }}">
<a href="{{ theme_config.blogonmenu.directory }}">{{ theme_config.blogonmenu.title }}</a>
</li>
{% endif %}
So the file (navigiation.html.twig) will look like this
<ul>
{% if page.template == 'modular' %}
{% for module in page.collection() if module.header.menu %}
<li class="menu-item{% if loop.index == 1 %} active{% endif %}">
<a href="#{{ module.folder|trim('_') }}" data-scroll>{{ module.header.menu }}</a>
</li>
{% endfor %}
{% if theme_config.blogonmenu.enabled %}
{% set current_page = (p.active or p.activeChild) ? ' active' : '' %}
<li class="menu-item{{ current_page }}">
<a href="{{ theme_config.blogonmenu.directory }}">{{ theme_config.blogonmenu.title }}</a>
</li>
{% endif %}
{% else %}
{% for p in pages.children.visible %}
{% set current_page = (p.active or p.activeChild) ? ' active' : '' %}
<li class="menu-item{{ current_page }}">
<a href="{{ p.url }}">{{ p.menu }}</a>
</li>
{% endfor %}
{% endif %}
</ul>
Save this and you should be good to go.
How it works / What it is doing
The new code, check if in a .yaml in the root of the themes folder has a set of parameters for a variable called ‘blogonmenu’, if it exists and isenabled, the front page of the site will add a menu item at the end of the existing menu layout and looking at the directory / url / link / route it will require (directory in the yaml) and also the wording in the menu you would like it to display (title in the yaml)
You should be able to reuse this snippet and quickly add the blog to most single page templates.
NOTES :
On the blog page, the navigation will change to a reduced menu, this is due to this template is a designed as a “single page layout” rather than a “multi page site”. I am not sure what you would like to have appear here, so for the moment it will just toggle between the two.
Have a go with the other theme (Diverse) and you should be able to follow the steps and use it that theme.
Let us know how you get on.
1.- Thanks a lot for your time in your detailed solution @spamhater , I will try it tomorrow, and I will let you know the results.
2.- Yes, you are right @spamhater the menu gets bigger, but I use this type of blog and dropdown combination using the categories tag for small websites with a small amount of products and it works with Theme Deliver @pamtbaau . I like the way products looks with the blog format and pagination. I do not use it for blog indeed, only for products.
Regards
@spamhater, I’ve taken a quick look at your suggestion and have some remarks…
.1
First of all, the proposed solution doesn’t answer the question of OP. All the script is achieving is adding an extra menu-item to the blog page when the current page is a modular page. No dropdown-menu for categories/blog-items is being created as requested by OP.
.2
Go to the theme folder (Mache) edit the template yaml file (mache.yaml)
The script suggests to edit file /user/themes/mache/mache.yaml, which in fact is a bad practice. These changes will be lost when a new version of Mache arrives. Changes of the config should be done in /user/config/themes/mache.yaml
.3
Then go to the themes partial folder and look for the navigation.html.twig (/user/theme/mache/templates/partials/navigiation.html.twig)
Again, same bad practice, all changes in the folder of a theme will be lost when a new version of the theme arrives. When making changes to a theme’s template, an inherited theme should be created.
.4
{% set current_page = (p.active or p.activeChild) ? ' active' : '' %}
The value of current_page will always be '', because variable p isn’t defined anywhere… Besides that, since the current page is a modular page, the menu-item for the blog can never be active anyway…
.5
<a href="{{ theme_config.blogonmenu.directory }}">{{ theme_config.blogonmenu.title }}</a>
The script suggest, as an example, the url directory: '/blog' in the config file. The result of the Twig snippet will then become: <a href="/blog">Blog</a>
localhost/mysite, or https://domain/grav, it will fail because localhost/blog, and https:/domain/blog does not exist.https://domain/en/blog or https://domain/fr/blog which depends on the language of the user. Also in this case, the generated url will fail..6
This method should be used on any theme you want to adapt
Not all themes are designed equally…
theme_config, which is not defined in all themes….7
this is due to this template is a designed as a “single page layout” rather than a “multi page site”
Theme Mache, is not designed as a “single page layout”. It supports equally well modular pages, list/blog pages and default/regular pages.
You should never ever edit theme files directly. The suggested approach will last only until the first update of the theme. If you want to extend templates, you should inherit the theme you want to extend, use it and extend what you need there
Hi @pambaau, @karmalakas , thank you both for your comments.
Firstly I want to make it clear, I am not a professional developer, but someone who is looking to learn and full understand grav,
All the comments are fair comments and all need to be tackled. I just know that joejac wanted to try and achieve something as a start place, the original question was one of those questions where someone just needed to work differently.
Yep, ok its clear that I need to create a inherited theme before doing any changes, which I will look in to doing.
Yep there is no drop down option for the blog items, but I wasn’t sure if he just needed a menu option or a drop down as it was a bit unclear without visualization, due to the themes chosen don’t support this naturally.
Ok the location of user/config/themes is something, that I didn’t think about, but that makes sense and can see it is a better practice.
I will go and play with this from this point further.
5 and 6 That is a great point , looking at the bigger picture 
Just the menu options and navigation hasn’t got a fully featured menu system that includes drop down / sub menus, the optional blog function, so I apologies for maybe “for poor grammar / explanation” I do find sometimes my dyslexia can obscure my clarity.
With the theme being 3 years old, it looked like it wasn’t been maintained, (one of the things I have personally found with a lot of stuff with grav, that people dip there toe in too it and for what ever reason “move on”.
I do know from the original post, the end goal hasn’t been achieved as now it been clarified Joe wants a drop down menu and use taxomites / categories to reduce the memory items.
I will go off today and have another ago of get something working, using the points in the discussion from you both and apply them. It will still not maybe be perfect but happy for the input.
Thanks for you both taking the time to reply.
Lets hope v2 will be a bit more in line with your best practice outlines and give joe a good working practice solution which can be used to transfer to other themes.
Thanks all coffee time and a bit more reading !
@spamhater, I’m glad you’ve taken the feedback as learning points and not as flames.
And know that your enthusiasm for creating a solution for a fellow community member is appreciated. From personal experience, I know the questions posted on the forum will take you into every corner of Grav and will enhance your knowledge/skills.
but I wasn’t sure if he just needed a menu option or a drop down as it was a bit unclear without visualization
Learning point:
Don’t build anything for a client (aka. community member) if it isn’t clear what the client needs… Unless, prototyping is required to reveal the needs of the client.
one of the things I have personally found with a lot of stuff with grav, that people dip there toe in too it and for what ever reason “move on”
Yes, I’m surprised to see how easily plugins and themes are being offered to the community and being abandoned without any notice.
Hello and thanks to all of you for dedicating your valuable time in response to my question. I do not know if I expressed clearly what I would like to do, English is not my native language and I am not a programmer. I will provide an image.
Special thanks to @pamtbaau for your diligence to answer promptly, since his answer saved me time in testing, because I would not be aware that it would not work as expected.
What I did with the Deliver theme is not ideal, I know, but it works. An not only I have the drop-down menu, I also have the blog blocks that shows the categories list with the number of products inside each category, and also the full products list below. Very handy, unfortunately this setup forced me to duplicate pages, which is not ideal, I did not know how to solve it, forgive me, I am not a programmer, but it is working.
In this case of Mache theme, I do not need the categories and products blocks located in the “sidebar-content archives” classes of Deliver theme, Mache does not provide them, but it does provides a nice display grid of 3 or 6 products, plus the pagination, I love it.
This is the image of Deliver with drop-down menu, sorry the website is in Spanish:
Been working on the theme, I am now have a working drop down model made accessible. It needs a bit of tweaking with the css styles and optimizing a bit to remove some redundant css and the background of the menu when being accessed for the modular page (transparent) and then on a default page (black header).
So taking it further to achieve your goal.
Firstly the page you screenshot, can that site be made available for me to look at it working and get to see how it interacts.
Will you be using the modular front page as a landing page / single page like the original mache theme was designed ?
Are you basically looking for the same site structure used in your screen shot site
Are you looking to upgrade the theme from diverse to mache ?
With the blog, how are you organizing your data which is displayed in the menu? Presume with using particular blog tags
What is a realistic drop-down going to encounter in items as too many items will have the menu appear off page. Are you wanting a physical limit adding to the sub-menu ? Are you looking it also to display it in some sort of date order, so the blog menu show categories which are current over display by a default / sorted order.
From the example the site looks like it has been designed with only desktop screen, due to the real estate which it is occupying. How are you wanting a mobile / reduced / responsiveness work
If using the landing page style, Where do you want the blog menu be available from? From the front modular / page on wards or buy
How will you be organizing your other non-landing pages, how will they be accessed, from a modular front page section. How many other page / sections / menu items will you be looking to display ?
Can you create / use some existing page data where it will reflect the blog articles and how you want the drop down menu to work with example of the categories and how you are structurally wanting the information displayed
There is a lot to go for before I can write the logic and take the theme further and relies on your input / demo pages / site links of existing / similar site you have available.
I am happy to try and take this further, but need your direction, expectation levels as I using this as self development in to grav, themes but I am don’t want to be doing lots of changes at every stage to accommodate what you decide afterwards, as I have only so much free time.
Clarity will be the key here.
Currently I am doing the theme as inherited now as pointed out by the points raised and best practices.
Hope this helps and look forward to delivering something that meets your current needs.
Nick
Hello @spamhater, thank you for your time to respond.
I need something simple, I do not want to cause any trouble, if it is time-consuming for you, don’t do it unless you are going to use the Mache theme for yourself and like to have a dropdown menu.
Please bear in mind that Deliver theme already has a dropdown menu, perhaps it would be a good idea to adapt the dropdown code of the Deliver theme to the Mache theme. I do not know if it is feasible.
Again, thanks for your time and disposition
Regards
joejac
Joejac thanks for taking the time to reply, I am sure we both can get this working and what you need.
Will wait on the link, but I will say if the products menu / blog code is working , yep it will be good to see how you have adapted to your needs and then getting it working with menu. I will look at the deliver code and use that as a start reference.
As regards time and using the theme, I been looking at ways of seeing what grav and my skillset is capable off, so don’t mind focusing some time to it, but it might me a few days to do something a pro developer can do in a few hours
Looking forward to the challenge
@spamhater, I’m afraid this is going to be a very long post…
Since this development process isn’t really adding value to this post, would it be an idea to clone Mache into a Github repo and continue the discussion over there?
If community members do have interest in the entire process, they can follow the project on Github.
Then, when ready, a resume could be feed back into this post.
@pamtbaau . I can see your point, will take the conversation privately until I can reveal something, as you say.
Will look at how to work out, how to get it working with git.
As always thank you for your input
