Hide navigation and header [Antimatter]

Support
1

I’m working with a modified version of the Antimatter theme.

I want to hide the navigation and the header on a page-by-page basis. Also hide the navigation on a page-by-page basis.

The site: http://www.learahelbader.com/de

Where is the place to introduce a command such that when you enter on a page-by-page basis the following into frontmatter: hide_navigation: true - in this case, the navigation would disappear? I have no clue about twig, fyi, just a good feel for html, css and markdown.

Thanks a lot for your support.

1 Like
2

Hi @werdi, I actually do something very similar for several of my open education and publishing projects (Bootstrap4 Open Matter and Quark Open Publishing theme) for Grav so Grav content can be ‘chromelessly’ embedded into other systems like LMS etc.

In general, you want to usually skip the Twig responsible for displaying the menu, header, etc based on a variable (either page header or in my case a theme option or URL flag).

Here are some example Twig files which might help:

Here is a live demo of the Quark Open Publishing theme:
https://demo.hibbittsdesign.org/grav-open-publishing-quark/

And ‘chromeless’ view:
http://demo.hibbittsdesign.org/grav-open-publishing-quark/chromeless:true

BTW, I use a bit of jQuery so chromeless is maintained even when going from Grav page to Grav page.

I hope the above helps.
Paul

3

Thanks for your reply!

I’m afraid I didn’t understand this:

chromeless and LMS - no idea.

I understand that it’s about skipping the Twig. I couldn’t grasp how to do this from the files you sent me. I have no clue about Twig.

Can you explain in a different way?

4

By “chromeless” I mean presenting a web page with content only, no navbar, sidebar, footer, etc. By ‘LMS’ I mean a Learning Management System, which is used by a lot of universities for providing course content to students.

For the functionality that you are describing you will need to use custom Twig for that. However, if you use one of my themes such as Bootstrap4 Open Matter or Quark Open Publishing the ability to hide the navbar/sidebar/footer is already included in the theme (but not to hide it page-by-page by frontmatter but rather by the URL used to embed the page).

I hope the above helps a bit more.
Paul

1 Like
5

@werdi, Based on a child theme of Antimatter, I have created a sample to hide/show the entire header or only show/hide the navbar.

To hide/show a block of code based on the frontmatter of a page, you do the following in general:

  1. In page file header you set the required variable:
    ---
hide_navigation: true 
---
# A page without navigation
  2. In Twig:
    {% if not page.header.hide_navigation %}
   {# Show this if page.header.hide_navigation is not defined, or is false #}
   {# Here goes the HTML building your navigation bar #}  
{% endif %}

If we want to implement hide/show header/navigation in a child-theme based on Antimatter, we could do the following:

  1. In frontmatter of page hiding navigation (but keeping the navbar with language-switcher):
    ---
hide_navigation: true
---
# I have no navigation
  2. In frontmatter of page hiding entire header (including the navigation):
    ---
hide_header: true
---
# I have no header
  3. In twig /user/themes/werdi_theme/templates/partials/base.html.twig, we surround the blocks {% block header %} and {% block header_navigation %} with the proper if-statements to hide/show the header resp. navigation. Note, I keep the language switcher.
     <head>
 ...
 </head>
 <body id="top" class="{{ page.header.body_classes }}">
     <div id="sb-site">
 {% if not page.header.hide_header %}
         {% block header %}
         <header id="header">
             <div id="logo">
                 <h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ config.site.title }}</a></h3>
             </div>
             <div id="navbar">
                 {% block header_extra %}{% endblock %}
                 {% if config.plugins.langswitcher.enabled %}
                 {% include 'partials/langswitcher.html.twig' %}
                 {% endif %}
     {% if not page.header.hide_navigation %}
                 {% block header_navigation %}
                 {% include 'partials/navigation.html.twig' %}
                 {% endblock %}
     {% endif %}
                 <span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
             </div>
         </header>
         {% endblock %}
 {% endif %}
         {% block showcase %}{% endblock %}
    Note: For clarity I did not properly indent the {% if %} and {% endif %} statements.

Hope this helps…

3 Likes
6

Thanks for your reply and the clarifications. For now, I’m trying to solve the issue with my present website.

7

@anon76427325 This sounds like exactly what I’m looking for. I will have to take a few days to try it out during next week. For now, thanks, I’ll get back and let you know.

As to the language switcher, I mean to have the twig in place already to toggle it on and off. Correct?

8

@werdi, would you mind expanding on your last remark wrt. the language-switcher? I’m afraid I do not quite understand it…

Do you want to remove both the language-switcher and the navigation at the same time using the variable ‘hide_navigation’?

9

Thanks for sharing that example @pamtbaau👍

10

What I meant to say is that when I had the site modified, I asked for a toggle for the langswitcher: “hide_langswitcher: true” or something like that. I’ve not really used it, but it’s there. I was just missing the tools to hide the other parts: navigation and header.

11

@werdi, Does that mean you have all the info you need to continue and your issue has been solved?

12

For now I have the information to continue, but I haven’t solved the issue yet because I need to go in there and try it out.

I’m marking your answer as solved and will get back to you when I implement it.

Thank you.

14

@anon76427325 Thanks again for your help, it worked!